Home > Article > Web Front-end > jQuery's operation of selecting all and unselecting all checkboxes

jQuery's operation of selecting all and unselecting all checkboxes

高洛峰Original: 2017-02-06 13:09:05989browse

Let me show you the renderings first. If you feel good about it, please continue to refer to the implementation code.

jQuery对checkbox 复选框的全选全不选反选的操作

HTML code:

<body>
<ul id="list">
<li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</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 code:

<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(){ //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
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>

Note: Due to the change of jquery version, the new version can only be clicked once. The older version is ok, but the new version cannot use attr to set the selected state. The first solution The method is to use the native js method this.checked=true/false;

The second solution is to replace attr with prop.

The above is the jQuery operation introduced by the editor to you to select all and unselect all of the checkbox checkboxes. I hope it will be helpful to you. If you have any questions, please let me know. Leave a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more jQuery-related articles on the checkbox checkbox’s selection of all, unselect, and inverse selection, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js html css implements full selection and inverse selection of check boxesNext article：js html css implements full selection and inverse selection of check boxes

See more

jQuery's operation of selecting all and unselecting all checkboxes

Related articles