jQuery CheckBox全选、全不选实现代码小结

时间:2023-01-15 17:09:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Index</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#CheckAll").click(function() { 
var flag = $(this).attr("checked"); 
$("[name=subBox]:checkbox").each(function() { 
$(this).attr("checked", flag); 
}) 
}) 
}) 
</script> 
</head> 
<body> 
<div> 
<input id="CheckAll" type="checkbox" />全选 
<input name="subBox" type="checkbox" />1 
<input name="subBox" type="checkbox" />2 
<input name="subBox" type="checkbox" />3 
<input name="subBox" type="checkbox" />4 
</div> 
</body> 
</html> 

下面的代码比较全,是基于js的控制原理实现


<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script> 
<script type="text/javascript"> 
//全选 
function CheckedAll(){ 
$(':checkbox').attr('checked','checked'); 


//全不选 
function CheckedNo(){ 
$(':checkbox').attr('checked',''); 


//反选 
function CheckedRev(){ 
var arr = $(':checkbox'); 
for(var i=0;i<arr.length;i++){ 
arr[i].checked = ! arr[i].checked; 


</script> 
<body> 
<div> 
<input id="CheckAll" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
</div> 
<input type="button" name="btnCheckedAll" value="全 选" onclick="javascript:CheckedAll();" /> 
<input type="button" name="btnCheckedNo" value="全不选" onclick="javascript:CheckedNo();" /> 
<input type="button" name="btnCheckedRev" value="反 选" onclick="javascript:CheckedRev();" /> 
</body>