jQuery實現全選和全不選

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成複選框的全選和全不選</title>
		<script type="text/javascript" src="jquery.min.js" ></script>

		<script>
			$(function(){
				//第一種方式:
				/*$("#checkallbox").click(function(){	
					var isChecked = this.checked;
					$("input[name='hobby']").each(function(){
						this.checked = isChecked;
					});
				});*/
				//第二種方式:	
				$("#checkallbox").click(function(){					
					$("input[name='hobby']").prop("checked",this.checked);
				});
			});
		</script>
		
	</head>
	<body>
		請選擇你的愛好<br/>
		<input type="checkbox" id="checkallbox" />全選/全不選<br/>
		<input type="checkbox" name="hobby" value="足球" />足球
		<input type="checkbox" name="hobby" value="籃球" />籃球
		<input type="checkbox" name="hobby" value="游泳" />游泳
		<input type="checkbox" name="hobby" value="唱歌" />唱歌<br/>
		
	</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章