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

Posted 2020-10-01

全选方面的功能几乎是每个需要列表展示的网站所必不可少的，当然此功能也有很多种写法，现在介绍一下，比较简洁易懂的写法：

<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);

});

 

本文：摘抄+记录