jQuery实现选择爱好器功能

矫情吗；* 2022-12-02 12:27 105阅读 0赞

描述：点击按钮实现全选或全不选功能。  
具体代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery选择练习</title>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				var $checkallBox = $('#checkallBox');
    				var $items = $('input:checkbox[name=items]');
    				//全选prop专门用于设置属性为布尔值的
    				$("#checkAllBtn").click(function(){
    					$items.prop("checked",true);
    					$checkallBox.prop("checked",true);
    				});
    				//全不选
    				$("#NotCheck").click(function(){
    					$items.prop("checked",false);
    					$checkallBox.prop("checked",false);
    				});
    				//反选
    //				$("#CheckRev").click(function(){
    //					$checkallBox.prop("checked",true);
    //					$items.each(function(){
    //						this.checked = !this.checked;
    //						if(!this.checked){
    //							$checkallBox.prop("checked",false);
    //						}
    //					});
    //				});
    				$("#CheckRev").click(function(){
    					$items.each(function(){
    						this.checked = !this.checked;
    					});	
    					$checkallBox.prop("checked",$items.filter(':not(:checked)').length===0);
    				});
    				//弹出所选复选框的值
    				$("#SendBtn").click(function(){
    //					$items.each(function(){
    //						if(this.checked){
    //							alert($(this).val());
    //						}
    //					});
    				$items.filter(':checked').each(function(){
    					alter(this.value);
    				});
    				});
    				
    				//点击全选全不选
    				$checkallBox.click(function(){
    					//不能使用$checkallBox.checked;因为jQuery对象没有checked属性
    					$items.prop('checked',this.checked);
    				});
    				//当下面复选框全被选中时，$checkallBox也应该被选中，当取消一个时就应该被取消
    //				$items.click(function(){
    //					$checkallBox.prop("checked",true);
    //					$items.each(function(){
    //					/*$checkallBox.prop("checked",true);不能放在该位置，否则点击checkallBox以后，
    //						点击取消一个选项时checkallBox不会为false，要点击第二个才会为false*/
    //						if(!this.checked){
    //							$checkallBox.prop("checked",false);
    //						}
    //					});
    //				});
    				$items.click(function(){
    					$checkallBox.prop("checked",$items.filter(':not(:checked)').length===0);
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<form method="post" action="">
    			你的爱好是？<input id="checkallBox" type="checkbox" value="全选/全不选"/>全选/全不选
    			<br />
    			<input type="checkbox" name="items" value="足球" />足球
    			<input type="checkbox" name="items" value="篮球" />篮球
      			<input type="checkbox" name="items" value="羽毛球" />羽毛球
    			<input type="checkbox" name="items" value="乒乓球" />乒乓球
    			<br />
    			<input type="button" id="checkAllBtn" value="全选" />
    			<input type="button" id="NotCheck" value="全不选" />
      			<input type="button" id="CheckRev" value="反选" />
    			<input type="button" id="SendBtn" value="发送" />
    		</form>
    	</body>
    </html>