用jqurey实现简单的全选、全不选、反选

最新推荐文章于 2022-01-06 18:42:02 发布

zhangxiaofeng2018

最新推荐文章于 2022-01-06 18:42:02 发布

阅读量187

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/zhangxiaofeng2018/article/details/79793383

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
		$(function(){
		$('#quanxuan').click(function(){
			console.log($(":checkbox").attr('checked',true));
		});
		$('#fanxuan').click(function(){
			console.log($("input:checked").attr('checked',false));
		});
});	
		 function reverseAll(){
      	$(':checkbox').each(function(){
        var v = $(this).prop('checked')? false:true;  /*三元运算： var v = 条件? 真值:假值
		如果checked值为true v=false
		如果checked值为false v=true
        */
        $(this).prop('checked',v)
      })
    }
</script>
</head>
<body>
<form>
<input type="checkbox"	/>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="button" id='quanxuan' value="全选" />
<input type="button" id='fanxuan' value="全不选" />
<input type="button" οnclick="reverseAll()" value="反选"/>
</form>
</body>
</html>