用jquery修改默認的單選框radio或者復選框checkbox選擇框樣式

默認的radio和checkbox選框很難看。我去看了一下qq注冊的頁面。發現單選和復選框並沒有用<input>,居然是用是A標簽。然后用css背景圖片展示選擇框，用JavaScript控制切換。然后我自己用jqeury寫了一個這樣功能的。

 

先是html代碼

性別

<div id="box-6">
　　 <label>性別</label> 
    <a href="#" name="male" id="sex-1" class="sex-checked-fouse">男</a>
    <a href="#" name="femail" id="sex-2" class="sex-nocheck">女</a>
</div>

愛好

<div id="box-8">
   <label>興趣愛好</label>
   <a href="javascript:;" id="hobby-1" class="hobby-nocheck">運動</a>
   <a href="#" id="hobby-2" class="hobby-nocheck">科學</a>
   <a href="#" id="hobby-3" class="hobby-nocheck">讀書</a>
</div>

 

jquery代碼

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function() {
            var i = 0;
            var obj;
            /*性別*/
            $("#sex-1").click(function() {/*獲取性別男選擇框*/
                if($("#sex-2").has("sex-checked-fouse")){/*如果女被選中*/
                    $("#sex-2").removeClass("sex-checked-fouse").addClass("sex-nocheck");/*移除女焦點樣式（焦點樣式就是選中圖片）。並且添加未選中樣式（就是未選中圖片）*/
                    $("#sex-1").removeClass("sex-nocheck").addClass("sex-checked-fouse");/*移除男未選中樣式，添加焦點樣式*/
                }
                })
            $("#sex-2").click(function() {/*獲取性別女選擇框*/
                if($("#sex-1").has("sex-checked-fouse")){/*如果男被選中*/
                    $("#sex-1").removeClass("sex-checked-fouse").addClass("sex-nocheck");/*與上同理*/
                    $("#sex-2").removeClass("sex-nocheck").addClass("sex-checked-fouse");
                }
            })

            /*興趣*/
            $("#hobby-1,#hobby-2,#hobby-3").click(function() {
                hobby(this);/*調用hobby方法並傳參*/
            })
            function hobby(obj) {
                // 這是控制興趣選擇框的方法hobby
                var _this = obj;/*獲取元素並賦值*/
                if($(_this).hasClass("hobby-nocheck")){
                    $(_this).removeClass("hobby-nocheck").addClass("hobby-checked-fouse");
                }else {
                    $(_this).removeClass("hobby-checked-fouse").addClass("hobby-nocheck");
                }
            }
　　 })

</script>

 

效果↓（多選選擇框是我自己p,有點難看--）