快捷導(dǎo)航

jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作

更新時(shí)間：2016年08月09日 09:21:17 作者：星光-

這篇文章主要介紹了jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

先給大家展示下效果圖，如果大家感覺還不錯(cuò)，請(qǐng)繼續(xù)參考實(shí)現(xiàn)代碼。

HTML代碼：

<body>
<ul id="list"> 
<li><label><input type="checkbox" name="items" value="1"> 1.時(shí)間都去哪兒了</label></li> 
<li><label><input type="checkbox" name="items" value="2"> 2.海闊天空</label></li> 
<li><label><input type="checkbox" name="items" value="3"> 3.真的愛你</label></li> 
<li><label><input type="checkbox" name="items" value="4"> 4.不再猶豫</label></li> 
<li><label><input type="checkbox" name="items" value="5"> 5.光輝歲月</label></li> 
<li><label><input type="checkbox" name="items" value="6"> 6.喜歡妳</label></li> 
</ul> 
<input type="checkbox" id="all"> 全選/全不選</br>
<input type="button" value="全選" class="btn" id="selectAll"> 
<input type="button" value="全不選" class="btn" id="unSelect"> 
<input type="button" value="反選" class="btn" id="reverse"> 
<input type="button" value="獲得選中的所有值" id="btn" id="getValue">
</body>

jquery代碼：

<script type="text/javascript">
$(function(){
//全選/全不選
$("#all").click(function(){
$("[name=items]:checkbox").attr("checked",this.checked);
});
$("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#all").attr("checked",flag);
})
//全選
$("#selectAll").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",true);
});
});
//全不選
$("#unSelect").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",false);
});
});
//反選
$("#reverse").click(function(){
$("[name=items]:checkbox").each(function(){ //遍歷每一個(gè)復(fù)選框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取復(fù)選框的反向值
this.checked=!this.checked; //js方法
});
});
//輸出選中的值
$("#btn").click(function(){
var str="你選中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>

注：由于jquery版本的變更，新版本出現(xiàn)只能點(diǎn)擊一次，老一點(diǎn)的版本是可以的，新的版本不可以使用attr來設(shè)置選中狀態(tài)了，第一種解決方法是可以使用js原生的方法this.checked=true/false;

第二種解決方法是把a(bǔ)ttr換成prop。

以上所述是小編給大家介紹的jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: