下面小編就為大家?guī)?lái)一篇jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。
jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
首先：引入jquery
<title>haran.info_jquery實(shí)例_全選全不選反選_select-all_unselect-all_reverse</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<script src="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery -->
樣式：
<styletype="text/css">
<!--
#div1{
width:980px;
margin:0 auto;
position:relative;
text-align:left;
padding-left:400px;
line-height:30px;
border:1px dotted #0075c5;
}
li{
display:block;
list-style:none;
float:left;
position:relative;
padding-left:20px;
}
.clr{
height:20px;
}
-->
</style>
body布局：
<divid="div1">
<divclass="clr"> </div>
<!--選項(xiàng)開(kāi)始-->
<inputtype="checkbox"/><ahref="haran.info">haran.info_腳本編程</a><br/>
<inputtype="checkbox"/><ahref="haran.info">haran.info_網(wǎng)站編程</a><br/>
<inputtype="checkbox"/><ahref="haran.info">haran.info_系統(tǒng)管理</a><br/>
<inputtype="checkbox"/><ahref="haran.info">haran.info_服務(wù)器配置</a><br/>
<inputtype="checkbox"/><ahref="haran.info">haran.info_系統(tǒng)運(yùn)維</a><br/>
<inputtype="checkbox"/><ahref="haran.info">haran.info_博客</a><br/>
<inputtype="checkbox"/><ahref="haran.info">haran.info_首頁(yè)</a><br/>
<!--選項(xiàng)結(jié)束-->
<!--功能按鈕開(kāi)始-->
<inputtype="button"id="selAll"value="全選"/>
<inputtype="button"id="unselAll"value="全不選"/>
<inputtype="button"id="reverse"value="反選 "/>
<!--功能按鈕結(jié)束-->
<divclass="clr"> </div>
</div><!--關(guān)閉div1-->
實(shí)現(xiàn)功能：
<scripttype="text/javascript">
$(document).ready(function () {
$("#selAll").click(function () { //":checked"匹配所有的復(fù)選
$("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之間必須有空格checked是設(shè)置選中狀態(tài)。如果為true則是選中fo否則false為不選中
});
$("#unselAll").click(function () {
$("#div1 :checkbox").attr("checked", false);
});
//理解用迭代原理each(function(){})
$("#reverse").click(function () {
$("#div1 :checkbox").each(function () {
$(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判斷復(fù)選框的狀態(tài)：如果選中則取反
});
});
});
</script>
以上這篇jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考