jQueryCheckbox实现全选反选全部选

最新推荐文章于 2024-04-25 11:38:14 发布

转载最新推荐文章于 2024-04-25 11:38:14 发布 · 7.9k 阅读

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了一种使用jQuery进行复选框批量操作的方法，包括全选、全不选、反选以及获取选中值的功能实现。通过示例代码展示了如何高效地控制一组复选框的状态，适用于网页表单处理等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<!DOCTYPE html> 
<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<script src="jquery-1.8.0.min.js"></script> 
	</head> 
	<body> 
	<script>
    $(function() {

        //全选/全不选
        $("#all").click(function() {
            $("[name=items]:checkbox").prop("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>
<ul id="list"> 
	<li><label><input type="checkbox" name="items" value="1"> 一 </label></li> 
	<li><label><input type="checkbox" name="items" value="2"> 二 </label></li> 
	<li><label><input type="checkbox" name="items" value="3"> 三 </label></li> 
	<li><label><input type="checkbox" name="items" value="4"> 四 </label></li> 
	<li><label><input type="checkbox" name="items" value="5"> 五 </label></li> 
	<li><label><input type="checkbox" name="items" value="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> </html>

另转一位网友的一键实现3功能

//一键控制全选、反选、全不选
$('#orChecked').change(function(){
 if($(this).is(':checked')){
   var box = $('#box').children(':checkbox');
   if(box.length==box.filter(':not(:checked)').length){  // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
   $('#box').children(':checkbox').prop('checked',true);
 }else{   // 如果有选中个数，-> 反选 
   $('#box').children(':checkbox').each(function(){   
    $(this).prop('checked',$(this).is(':checked')?false:true);
   });
 }else{
   $('#box').children(':checkbox').prop('checked',false);  // 如控制键取消选中，剩余的checkbox也取消选中

 <div align="center">
     
   <div id="box">
     <input type="checkbox" value="1">西瓜
     <input type="checkbox" value="2">芒果
     <input type="checkbox" value="3">橙
     <input type="checkbox" value="4">山竹
     <input type="checkbox" value="5">草莓
     <input type="checkbox" value="6">火龙果
   </div>  
       
   <br>
       
   <input type="checkbox" id="allChecked">全选
   <input type="checkbox" id="invertChecked">反选
   <input type="checkbox" id="orChecked">全选/反选/全不选
       
 </div>