jquery是很實(shí)用和方便的前端效果庫(kù)，可以讓我減少很多的操作和節(jié)省很多的時(shí)間。今天，我們來(lái)說(shuō)一下jq的全選、全不選和反選效果，本篇講的是最簡(jiǎn)單簡(jiǎn)潔的jq全選、全不選和反選的例子。如果還有什么其他的功能要求可自己根據(jù)所學(xué)到的基礎(chǔ)來(lái)擴(kuò)展一下。

首先，我們來(lái)創(chuàng)建一下所需要的html頁(yè)面，導(dǎo)入jq文件，這里我們使用的是jq壓縮版，把復(fù)選框例子填充上。

創(chuàng)建html頁(yè)面的同時(shí)，把全選、全不選和反選按鈕分別給它們id命名：all、not、reverse，方便jq之后獲取CheckBox來(lái)實(shí)現(xiàn)全選不選等效果。

接下來(lái)，就是我們的jq登場(chǎng)了，jq根據(jù)按鈕的ID名來(lái)獲取點(diǎn)擊事件，來(lái)實(shí)現(xiàn)我們所需要的效果。

其中，prop（），我們來(lái)說(shuō)一下它的含義。

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

當(dāng)該方法用于返回屬性值時(shí)，則返回第一個(gè)匹配元素的值。

當(dāng)該方法用于設(shè)置屬性值時(shí)，則為匹配元素集合設(shè)置一個(gè)或多個(gè)屬性/值對(duì)。

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

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

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簡(jiǎn)單的全選、反選和全不選效果-三人行慕課?www.3mooc.com

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。