首页 > 代码库 > jQuery全选、全不选、反选的简洁写法【实例】

jQuery全选、全不选、反选的简洁写法【实例】

2024-11-16 07:29:39   202人阅读

全选方面的功能几乎是每个需要列表展示的网站所必不可少的，当然此功能也有很多种写法，现在介绍一下，比较简洁易懂的写法：
<input type="checkbox" name="gogf[]"/>
<input type="checkbox" name="gogf[]"/>
<input type="checkbox" name="gogf[]"/>
<button id="all_xuan">全选</button>　
<button id="no_xuan">全不选</button>
<button id="fan_xuan">反选</button>
 
//jQuery代码如下：
$(‘button#all_xuan‘).click(function(){
       $(‘[name="gogf[]"]:checkbox‘).prop(‘checked‘,true);
})
$(‘button#no_xuan‘).click(function(){
　　$(‘[name="gogf[]"]:checkbox‘).prop(‘checked‘,false);
})
$(‘button#fan_xuan‘).click(function(){
　　$(‘[name="gogf[]"]:checkbox‘).each(function(index,element){
　　　　this.checked=!this.checked;
　　});
})
 
 
有时我们也会用 循环的方式选中
$(‘input:checkbox‘).each(function() {
　　$(this).attr(‘checked‘, true);
});
 
本文：摘抄+记录
 

jQuery全选、全不选、反选的简洁写法【实例】


联系
我们