jQuery 的全選(全非選)即取得被選中的值使用介紹
更新時間：2013年11月12日 17:22:50 作者：
全選、全非選即取得被選中的值在日常開發(fā)應(yīng)用中很廣泛，下面有個不錯的示例，大家可以感受下
頁面代碼
<body>
<div>
<input id="checkall" type="checkbox" value="天" />全部<br/>
<div id="con">
<input type="checkbox" name="checkbox" value="天" />天
<input type="checkbox" name="checkbox" value="空" />空
<input type="checkbox" name="checkbox" value="飛" />飛
<input type="checkbox" name="checkbox" value="來" />來
<input type="checkbox" name="checkbox" value="五" />五
<input type="checkbox" name="checkbox" value="個" />個
<input type="checkbox" name="checkbox" value="字" />字
<input type="checkbox" name="checkbox" value="這" />這
<input type="checkbox" name="checkbox" value="都" />都
<input type="checkbox" name="checkbox" value="不" />不
<input type="checkbox" name="checkbox" value="算" />算
<input type="checkbox" name="checkbox" value="事" />事</div>
</div>
<script src="Scripts/jquery-1.4.1.js" language="javascript"></script>
<script src="JqueryAll.js" language="javascript"></script>
</body>
js中的代碼
/*js部分
* 綁定批量選定/非選
* 例子
*/
$(function () {
$("#checkall").click(function () {
var stu = $(this).attr("checked");
checkAll(stu);
})
$("input[name='checkbox']").click(function () {
uncheckAll();
})
})
function checkAll(status) {
$("input[name='checkbox']").each(function () {
$(this).attr("checked");
$(this).attr("checked", status);
})
}
function uncheckAll() {
alert($("input[name='checkbox']:checked").length);
if ($("input[name='checkbox']:checked").length == $("input[name='checkbox']").length) {
$("#checkall").attr("checked",true);
}
else {
$("#checkall").attr("checked", false);
}
}
復(fù)制代碼 代碼如下:
<body>
<div>
<input id="checkall" type="checkbox" value="天" />全部<br/>
<div id="con">
<input type="checkbox" name="checkbox" value="天" />天
<input type="checkbox" name="checkbox" value="空" />空
<input type="checkbox" name="checkbox" value="飛" />飛
<input type="checkbox" name="checkbox" value="來" />來
<input type="checkbox" name="checkbox" value="五" />五
<input type="checkbox" name="checkbox" value="個" />個
<input type="checkbox" name="checkbox" value="字" />字
<input type="checkbox" name="checkbox" value="這" />這
<input type="checkbox" name="checkbox" value="都" />都
<input type="checkbox" name="checkbox" value="不" />不
<input type="checkbox" name="checkbox" value="算" />算
<input type="checkbox" name="checkbox" value="事" />事</div>
</div>
<script src="Scripts/jquery-1.4.1.js" language="javascript"></script>
<script src="JqueryAll.js" language="javascript"></script>
</body>
js中的代碼
復(fù)制代碼 代碼如下:
/*js部分
* 綁定批量選定/非選
* 例子
*/
$(function () {
$("#checkall").click(function () {
var stu = $(this).attr("checked");
checkAll(stu);
})
$("input[name='checkbox']").click(function () {
uncheckAll();
})
})
function checkAll(status) {
$("input[name='checkbox']").each(function () {
$(this).attr("checked");
$(this).attr("checked", status);
})
}
function uncheckAll() {
alert($("input[name='checkbox']:checked").length);
if ($("input[name='checkbox']:checked").length == $("input[name='checkbox']").length) {
$("#checkall").attr("checked",true);
}
else {
$("#checkall").attr("checked", false);
}
}
相關(guān)文章
通過jquery和css相結(jié)合的方式實現(xiàn)鼠標(biāo)點擊圖片彈出畫廊切換特效，效果逼真，下面小編把源碼分享給大家供大家參考2015-11-11
jquery下json數(shù)組的操作實現(xiàn)代碼
在jquery中處理JSON數(shù)組的情況中遍歷用到的比較多，但是用添加移除這些好像不是太多。2010-08-08
這篇文章主要介紹了jquery幻燈片插件bxslider樣式改進,對比官方樣式以實例形式講述了改進的技巧,非常實用,需要的朋友可以參考下2014-10-10
jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHei
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用2010-03-03
這篇文章主要是對jQuery控制iFrame的實例代碼進行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JQuery實現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點
這篇文章主要介紹了使用JQuery實現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點的代碼,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了限制上傳文件大小和格式的jQuery插件,實例分析了對上傳文件的大小及格式的限制功能,非常具有實用價值,需要的朋友可以參考下2015-01-01
本文給大家介紹jquery側(cè)邊欄實現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁上,如果你覺得不錯,可以參考下本文實現(xiàn)代碼2016-05-05
jquery中map函數(shù)遍歷數(shù)組用法實例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05
async在jquery ajax中是一個同步參數(shù)。本篇文章給大家介紹jq中的ajax async同步和異步，小伙伴跟著小編一起學(xué)習(xí)吧2015-09-09