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+CSS3實現(xiàn)仿windows10開始菜單的下拉導(dǎo)航菜單特效
本文是基于jquery和css3實現(xiàn)的仿windows10開始菜單的下拉導(dǎo)航菜單特效,代碼超簡單,感興趣的朋友一起看看吧2015-09-09關(guān)于hashchangebroker和statehashable的補充文檔
我覺得之前寫的兩篇隨筆有點不負責(zé)任,完全沒寫明白,補充了一份文檔(權(quán)且算是文檔吧=.=)2011-08-08Jquery validation remote 驗證的緩存問題解決方法
這篇文章主要介紹了Jquery validation remote 驗證的緩存問題的解決方法 ,需要的朋友可以參考下2014-03-03