默認的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) {// 這是控制興趣選擇框的方法hobbyvar _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,有點難看--）

?

轉載于:https://www.cnblogs.com/lijinwen/p/5574154.html

總結

以上是生活随笔為你收集整理的用jquery修改默认的单选框radio或者复选框checkbox选择框样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。