快捷導(dǎo)航

jQuery 的全選(全非選)即取得被選中的值使用介紹

更新時(shí)間：2013年11月12日 17:22:50 作者：

全選、全非選即取得被選中的值在日常開發(fā)應(yīng)用中很廣泛，下面有個(gè)不錯(cuò)的示例，大家可以感受下

頁面代碼

 
<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="個(gè)" />個(gè) 
<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制作圖片文字排版預(yù)覽效果附源碼下載
通過jquery和css相結(jié)合的方式實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊圖片彈出畫廊切換特效，效果逼真，下面小編把源碼分享給大家供大家參考
2015-11-11
jquery下json數(shù)組的操作實(shí)現(xiàn)代碼
在jquery中處理JSON數(shù)組的情況中遍歷用到的比較多，但是用添加移除這些好像不是太多。
2010-08-08
jquery幻燈片插件bxslider樣式改進(jìn)實(shí)例
這篇文章主要介紹了jquery幻燈片插件bxslider樣式改進(jìn),對比官方樣式以實(shí)例形式講述了改進(jìn)的技巧,非常實(shí)用,需要的朋友可以參考下
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(實(shí)例代碼)
這篇文章主要是對jQuery控制iFrame的實(shí)例代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點(diǎn)
這篇文章主要介紹了使用JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動到頁面節(jié)點(diǎn)的代碼,需要的朋友可以參考下
2015-07-07
限制上傳文件大小和格式的jQuery插件實(shí)例
這篇文章主要介紹了限制上傳文件大小和格式的jQuery插件,實(shí)例分析了對上傳文件的大小及格式的限制功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
jQuery側(cè)邊欄實(shí)現(xiàn)代碼
本文給大家介紹jquery側(cè)邊欄實(shí)現(xiàn)代碼，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁上,如果你覺得不錯(cuò),可以參考下本文實(shí)現(xiàn)代碼
2016-05-05
jquery中map函數(shù)遍歷數(shù)組用法實(shí)例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實(shí)例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個(gè)自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下
2015-05-05
jQuery中的ajax async同步和異步詳解
async在jquery ajax中是一個(gè)同步參數(shù)。本篇文章給大家介紹jq中的ajax async同步和異步，小伙伴跟著小編一起學(xué)習(xí)吧
2015-09-09