jQuery复选框全选反选操作

刺骨的言语ヽ痛彻心扉 2022-08-18 12:09 274阅读 0赞

<!DOCTYPE html>
    <html >
     <head>
      <title> jquery-ajax </title>
      <script src="http://eduppp.cn/js/jquery-2.1.4.min.js" type="text/javascript"></script>
     </head>
    
     <body>
     <script type="text/javascript">
     $(function(){//当DOM就绪时执行
    	 //检测当前选项并输出，全部选择时激活全选按钮
    	 	$("input[type='checkbox']").on("click",function(){
    			var n=$("input[name='chkb']").length;
    			var m=$("input:checked[name='chkb']").length;
    			$("#all").prop("checked",m==n);//选项全部选中时激活全选按钮。
    			var val = "";
    			$("input:checked[name='chkb']").each(function(){
    				val+=this.value+" ";
    			});
    			$("#res").html(val);//输出当前选择的内容
    		});
     });
    
    function chkall(){//全选、清除
    	var flag=$("#all").prop("checked");//提取全选按钮的状态，并赋值到各选项。
    	$("input[name='chkb']").prop("checked",flag);
    }
    function chkrev(){//反选
    	$("input[name='chkb']").each(function(){
    		var flag=$(this).prop("checked");
    		$(this).prop("checked",!flag)
    	});
    }
    
      </script>
    
     <div id="chk" class="">
    	<ul>
    		<li><label ><input type="checkbox" name="chkb" value="a">选项a</label></li>
    		<li><label ><input type="checkbox" name="chkb" value="b">选项b</label></li>
    		<li><label ><input type="checkbox" name="chkb" value="c">选项c</label></li>
    		<li><label ><input type="checkbox" name="chkb" value="d">选项d</label></li>
    		<li><label ><input type="checkbox" name="chkb" value="e">选项e</label></li>
    		<hr>
    		<label ><input type="checkbox" id="all" οnclick="chkall()">全选	</label>	
    		<label><input type="checkbox" id="rev"  οnclick="chkrev()">反选  </label>
    	</ul>
     </div>
     <div id="res" class=""></div>
    
    </body>
    </html>