用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,有點難看--）