您的位置：首页 > Web前端 > JQuery

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

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

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


上述代码亲测可用，如何大家有更好的写法，欢迎留言，交流学习！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航