JavaScript多选框的全选与取消

2018-07-20 来源：open-open

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var checkbox = $('input[name=checkbox]');
		$('.selectAll').on("click",function(){
			checkbox.prop('checked', this.checked);
		});
		checkbox.on("click",function(){
			var _tmp = checkbox;
			$(".selectAll").prop('checked',_tmp.length == _tmp.filter(":checked").length);
		});
		//或者使用下述方法
		// checkbox.on("click",function(){
		// 	var flag = true;
		// 	checkbox.each(function(){
		// 		if (!this.checked) {
		// 			flag = false;
		// 		};
		// 	})
		// 	if (flag) {
		// 		$('.selectAll').prop('checked', true)
		// 	}else{
		// 		$('.selectAll').prop('checked', false)
		// 	}
		// })
	})
    </script>
</head>
<body>
	<input type="checkbox" class="selectAll">全选/全不选<br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
</body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:Python生成随机数的方法

下一篇:java实现双向链表

最新资讯

热门推荐