jquery是很實用和方便的前端效果庫，可以讓我減少很多的操作和節省很多的時間。今天，我們來說一下jq的全選、全不選和反選效果，本篇講的是最簡單簡潔的jq全選、全不選和反選的例子。如果還有什么其他的功能要求可自己根據所學到的基礎來擴展一下。

首先，我們來創建一下所需要的html頁面，導入jq文件，這里我們使用的是jq壓縮版，把復選框例子填充上。

創建html頁面的同時，把全選、全不選和反選按鈕分別給它們id命名：all、not、reverse，方便jq之后獲取CheckBox來實現全選不選等效果。

接下來，就是我們的jq登場了，jq根據按鈕的ID名來獲取點擊事件，來實現我們所需要的效果。

其中，prop（），我們來說一下它的含義。

prop() 方法設置或返回被選元素的屬性和值。

當該方法用于返回屬性值時，則返回第一個匹配元素的值。

當該方法用于設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。

注意：prop() 方法應該用于檢索屬性值，例如 DOM 屬性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

這就是最簡單的全選、全不選和反選的實例，希望對你們有所幫助。下面附上代碼，供你們參考:

html代碼：

<div id="box-function"><input id="all" type="button" value="全選" /><input id="not" type="button" value="全不選" /><input id="reverse" type="button" value="反選" /></div><div id="choose"><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /> </div>

jq代碼：

<script type="text/javascript">$(function(){var $choose = $("#choose input");//全選$("#all").click(function(){$choose.each(function(){$(this).prop("checked",true);});});//全不選$("#not").click(function(){$choose.prop("checked",false);});//反選$("#reverse").click(function(){$choose.each(function(){$(this).prop("checked",!$(this).prop("checked"));});});});</script>

原文：

jq簡單的全選、反選和全不選效果-三人行慕課?www.3mooc.com

總結

以上是生活随笔為你收集整理的axure实现复选框全选_jq简单的全选、反选和全不选效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。