用Jquery实现全选不选反选等效果

最新推荐文章于 2024-01-23 19:19:19 发布

云雀·

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量241

点赞数 4

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_53388736/article/details/116207769

版权

<input type="checkbox"  id="btn1"/>全选
		<input type="checkbox" value="checkbox0" name="checkbox"/>0
		<input type="checkbox" value="checkbox1" name="checkbox"/>1
		<input type="checkbox" value="checkbox2" name="checkbox"/>2
		<input type="checkbox" value="checkbox3" name="checkbox"/>3
		<input type="checkbox" value="checkbox4" name="checkbox"/>4
		<input type="checkbox" value="checkbox5" name="checkbox"/>5
		<input type="checkbox" value="checkbox6" name="checkbox"/>6
		<input type="checkbox" value="checkbox7" name="checkbox"/>7
		<input type="checkbox" value="checkbox8" name="checkbox"/>8
		<input type="checkbox" value="checkbox9" name="checkbox"/>9
		<input type="checkbox" value="checkbox10" name="checkbox"/>10
		
		
		<input type="checkbox" id="btn2" />取消全选
		<input type="checkbox" id="btn3" />选择奇数
		<input type="checkbox" id="btn4" />选择偶数
		<input type="checkbox" id="btn5" />反选
		<input type="checkbox" id="btn6" />获取
		<script>
			//全选
			$("#btn1").click(function(){
				$("input[name='checkbox']").attr("checked","true");
			})
			//取消全选
			$("#btn2").click(function(){
				$("input[name='checkbox']").removeAttr("checked");
			})
			//选择奇数
			$("#btn3").click(function(){
				$("input[name='checkbox']:odd").prop("checked",true);
			})
			//选择偶数
			$("#btn4").click(function(){
				$("input[name='checkbox']:even").prop("checked",true);
			})
			//反选
			$("#btn5").click(function () { 
			  $("input[name='checkbox']").each(function () { 
			    $(this).prop("checked", !$(this).prop("checked")); 
			  });
			 
			});
			//获取选择项的值
			$("#btn6").click(function(){
			  var valArr = new Array;
			  $("input[name='checkbox']").each(function(i){
			    valArr[i] = $(this).val();
			  });
			  var vals = valArr.join(',');//转换为逗号隔开的字符串
			  alert(vals);
			});
			
		</script>