Jquery : jquery實現checkbox的全選和反選

html:

	<body>
		name:<input type="checkbox"  name="name"/><br />
		name:<input type="checkbox"  name="name"/><br />
		name:<input type="checkbox"  name="name"/><br />
		name:<input type="checkbox"  name="name"/><br />
		name:<input type="checkbox"  name="name"/><br />
		name:<input type="checkbox"  name="name"/><br />
		<button>全選</button>
		<button>全不選</button>
		<button>反選</button>
	</body>

jquery

<script src="js/jquery-3.1.1.js"></script>
<script>
	$(function(){
		$("button:eq(0)").click(function(){
			$("input[type=checkbox]").each(function(index,item){
				$(item).prop("checked","checked");
			})
		})
		$("button:eq(1)").click(function(){
			$("input[type=checkbox]").each(function(index,item){
				$(item).prop("checked",false);
			})
		})
		$("button:eq(2)").click(function(){
			$("input[type=checkbox]").each(function(index,item){
				if(item.checked){
					$(item).prop("checked",false);
				}else{
					$(item).prop("checked","checked");
				}
			})
		})
	})
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章