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

2019-11-20 21:43:31

字體：大中小

來源：轉載

供稿：網友

頁面代碼

 
<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); 
} 
} 