2008年12月7日星期日

jquery 对 checkbox 实现全选效果 (checkbox控制 | button控制)

以下有两种方法:
1. 使用 checkbox 进行控制 全选checkbox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Jquery click all </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox1" name="checkbox1" onClick="clickall(this);" >
<input type="checkbox" id="checkname1" name="checkname[]" value="1"/>1
<input type="checkbox" id="checkname2" name="checkname[]" value="2"/>2


<script type="text/javascript" language="javascript">
function clickall(cb){
if(cb.checked) {
$('input[@name="checkname[]"]').attr('checked',true);
} else {
$('input[@name="checkname[]"]').attr('checked',false);
}
}
</script>
</body>
</html>


2. 使用 Button 进行控制 全选checkbox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Jquery click all </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
$("#checkall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", true);
});
});
$("#delcheckall").click(function() {
$("input[@name='checkname[]']").each(function() {
$(this).attr("checked", false);
});
});
});
</script>
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1
<input type='checkbox' id='id2' name='checkname[]' value='2' />value2
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3
<input type="button" id="checkall" name="checkall" value="全选" />
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" />
</body>
</html>

没有评论: