jQuery中複選框checkbox實現複選框的全選/全不選,點擊按鈕實現複選框的全選/全不選/反選

 <table>
	<tr>
	 	<td>
			<input type="checkbox" name="check" />1
			<input type="checkbox" name="check" />2
			<input type="checkbox" name="check" />3
			<input type="checkbox" name="check" />4
			<input type="checkbox" name="check" />5
			<input type="checkbox" name="check" />6
		</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name="all" />全選/全不選
			<input type="button" name="checkAll" id="checkAll" value="全選" />
			<input type="button" name="checkNo" id="checkNo" value="全不選" />
			<input type="button" name="checkRev" id="checkRev" value="反選" />
		</td>

	</tr>

</table>

點擊複選框實現全選/全不選
當點擊全選/全不選的複選框時,DOM對象this.checked獲取的狀態通過prop()方法將所有的複選框設置爲同一狀態,第一次點擊時即爲全選狀態

   // 全選/全不選 
    $("input[name='all']").click(function(){
    	$("input[name='check']").prop("checked",this.checked);
    });

在這裏插入圖片描述
點擊全選按鈕實現全選
當點擊全選按鈕通過:checkbox複選框過濾器將所有的複選框狀態設置爲true即選中狀態。

// 全選按鈕
$("#checkAll").click(function(){
	$("input:checkbox").prop("checked",true);
});

在這裏插入圖片描述
點擊全不選按鈕實現複選框全部取消

// 全不選
$("#checkNo").click(function(){
	$("input:checkbox").prop("checked",false);
});

在這裏插入圖片描述
將選中的複選框實現反選

// 反選
$("#checkRev").click(function(){
	$("input[name='check']").each(function(){
		this.checked = !this.checked;
	});   	
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章