jQuery实现选择爱好器功能

最新推荐文章于 2022-11-21 21:20:31 发布

LRight-T

最新推荐文章于 2022-11-21 21:20:31 发布

阅读量367

点赞数

文章标签： checkbox jquery

本文链接：https://blog.csdn.net/qq_44604924/article/details/108311807

版权

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

<!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>