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

最新推荐文章于 2022-02-15 14:20:56 发布

原创最新推荐文章于 2022-02-15 14:20:56 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的网页示例，使用jQuery实现全选、全不选及反选的功能。通过点击按钮可以控制页面上所有复选框的状态。代码中包含了jQuery的选择器和属性操作方法，适用于初学者学习jQuery的基础用法。

<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" onclick="reverseAll()" value="反选"/>
</form>
</body>
</html>