checkbox 全選和反選

時間 2019-11-21

標籤 checkbox 全選欄目 HTML 简体版

原文原文鏈接

代碼以下：javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
	</head>
	<body>
		<div>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()" >管理員</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()">管理員</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()" >管理員</input>
		<input type="checkbox" value="2"  name="resource"  onchange="checkOption()">管理員</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()">管理員</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()" >管理員</input>
		</div>
		<input type="checkbox" id="selectOption" name="dd" onchange="allselected()"/>全選/全不選
		
	</body>
	<script type="application/javascript">
	 function allselected(){
				
				$("input[name='resource']:checkbox").each(function(){ 
					   this.checked=$("input[id='selectOption']:checkbox").is(':checked');
					  
				});
				
			}
	 
	 function checkOption(){
	 	 alert( $('INPUT[name=resource]:checked').length==$('INPUT[name=resource]').length);
	 	 //attr不靠譜，有問題
	 	 $('#selectOption').prop('checked',$('INPUT[name=resource]:checked').length == $('INPUT[name=resource]').length);
	 	 
	 	
	 }
	</script>
</html>

其中坑點在attr有時候取值會出錯，只能執行一次。適用prop就沒問題了。html

附attr和prop的區別：java

對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。
具體能夠看這個帖子：http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。