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中的代碼
/*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="個(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+CSS3實(shí)現(xiàn)仿windows10開始菜單的下拉導(dǎo)航菜單特效
本文是基于jquery和css3實(shí)現(xiàn)的仿windows10開始菜單的下拉導(dǎo)航菜單特效,代碼超簡(jiǎn)單,感興趣的朋友一起看看吧2015-09-09
jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法,涉及$(":header")選擇器操作h1-h6元素及事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)懸停3d菜單展開動(dòng)畫效果
本文主要介紹了jQuery鼠標(biāo)懸停3d菜單展開動(dòng)畫效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01
關(guān)于hashchangebroker和statehashable的補(bǔ)充文檔
我覺得之前寫的兩篇隨筆有點(diǎn)不負(fù)責(zé)任,完全沒寫明白,補(bǔ)充了一份文檔(權(quán)且算是文檔吧=.=)2011-08-08
Jquery validation remote 驗(yàn)證的緩存問題解決方法
這篇文章主要介紹了Jquery validation remote 驗(yàn)證的緩存問題的解決方法 ,需要的朋友可以參考下2014-03-03
jQuery實(shí)現(xiàn)圖片走馬燈效果的原理分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片走馬燈效果的原理,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)走馬燈的相關(guān)html頁面設(shè)計(jì)、css樣式布局與jQuery相關(guān)函數(shù)的使用,需要的朋友可以參考下2016-01-01

