DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 的全選(全非選)即取得被選中的值使用介紹
jQuery 的全選(全非選)即取得被選中的值使用介紹
編輯:JQuery特效代碼     
頁面代碼
代碼如下:
<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);
}
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved