設(shè)計(jì)要求效果如下：

平時(shí)看到的radio button效果如下：

可以看出設(shè)計(jì)上圖的radio button選中和沒有選中的狀態(tài)都有自定義的圖片樣式。但是我們使用radio button基本上都是需要在互斥的一組。我們需要保持radio button本身的功能，同時(shí)又需要自定義的它的樣式。之前項(xiàng)目中大家都是能使用傳統(tǒng)的radio button過了就過了，也沒有怎么研究。這次項(xiàng)目，我嘗試使用了一些方法，可以達(dá)到自定義的radio button的樣式。

4個(gè)選項(xiàng)的結(jié)構(gòu)都相同，只是內(nèi)容有所改變，結(jié)構(gòu)如下所示：

<li> <span class="pollspanRadio"><input name="pollresult" id="raido1" type="radio" class="radioinput" answerid="1"></span> <span class="radiotext"><label class="pollspanContent" for="raido1" data-index="1">HTML(5)</label></span> </li>

? 分左右兩個(gè)部分內(nèi)容，左邊顯示radio button，右邊顯示text相關(guān)內(nèi)容。需要對(duì)第一個(gè)span添加樣式。但是目前情況會(huì)發(fā)生重疊，而且選中狀態(tài)還是默認(rèn)的選中狀態(tài)。

通過設(shè)置樣式，我們可以將默認(rèn)的radio button隱藏不顯示出來，通過通過JavaScript來控制用戶選中其中的一個(gè)radio button，然后得到指定的值。代碼如下：

<script type="text/javascript">$("#optionlist li").live('click', function () {//移除之前選中的radio的樣式$("#optionlist li .pollspanRadio").removeClass("selectedoption");$(this).find(".pollspanRadio").addClass(" selectedoption");$(this).find("input[type='radio']").get(0).click();});</script>

因?yàn)楝F(xiàn)在自定義的radio button的樣式，所以我們現(xiàn)在要獲取到我們當(dāng)前選中的option的內(nèi)容值。通過jQuery解決問題非常方便。

我們最后想獲取的值應(yīng)該是作為屬性放在label標(biāo)簽里面，這里是data-index。我們通過選中radio button，需要獲得data-index的值。但是input和label是分開的，下面我們通過jQuery獲得我們選中的值。

var selectedOptionText = $("#optionlist li").find(".pollspanRadio input:checked").parent().parent().find(".pollspanContent").attr("data-index");

這里主要使用了jQuery的parent()函數(shù)，在這里程序的性能不是非常好。

改進(jìn)的地方：如果我們默認(rèn)第二個(gè)選中的話，在checked=”checked”，但是我們是模擬顯示，所以我們?cè)诔绦虺跏蓟?#xff0c;對(duì)此進(jìn)行判斷。

$(document).ready(function(){$("#optionlist li").find(".pollspanRadio input:checked").parent().addClass("selectedoption");});

完成之后的效果圖如下：

提示：Radio button需要放在form表單中，多個(gè)radio button才能互斥。

Demo文件下載地址:http://files.cnblogs.com/liminjun88/customRadioButton.zip

轉(zhuǎn)載于:https://www.cnblogs.com/liminjun88/archive/2012/10/22/2734149.html

總結(jié)

以上是生活随笔為你收集整理的自定义的html radio button的样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。