自定義的html radio button的樣式

設計要求效果如下：

平時看到的radio button效果如下：

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

4個選項的結構都相同，只是內容有所改變，結構如下所示：

<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>

  分左右兩個部分內容，左邊顯示radio button，右邊顯示text相關內容。需要對第一個span添加樣式。但是目前情況會發生重疊，而且選中狀態還是默認的選中狀態。

通過設置樣式，我們可以將默認的radio button隱藏不顯示出來，通過通過JavaScript來控制用戶選中其中的一個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>

因為現在自定義的radio button的樣式，所以我們現在要獲取到我們當前選中的option的內容值。通過jQuery解決問題非常方便。

我們最后想獲取的值應該是作為屬性放在label標簽里面，這里是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()函數，在這里程序的性能不是非常好。

改進的地方：如果我們默認第二個選中的話，在checked=”checked”，但是我們是模擬顯示，所以我們在程序初始化中，對此進行判斷。

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

完成之后的效果圖如下：

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

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