jQuery全选/全消CheckBox以及JS回调一例
<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.cnblogs.com/scripts/jquery/jquery.js"></script>
</head>
<body>
<form id="form1" runat="server">
<input type="checkbox" id="cbAll" name="cbAll" onclick="changeAll(this.checked, 'cb')"/><br />
<input type="checkbox" id="cb_1" name="cb" value="1,11" onclick="changeItem(this, 'cbAll')"/><br />
<input type="checkbox" id="cb_2" name="cb" value="2,22" onclick="changeItem(this, 'cbAll')"/><br />
<input type="checkbox" id="cb_3" name="cb" value="3" onclick="changeItem(this, 'cbAll')"/><br />
<input type="checkbox" id="cb_4" name="cb" value="4" onclick="changeItem(this, 'cbAll')"/><br />
<hr />
<input type="checkbox" id="chkAll" name="chkAll" onclick="changeAll(this.checked, 'chk')"/><br />
<input type="checkbox" id="chk_1" name="chk" value="a" onclick="changeItem(this, 'chkAll')"/><br />
<input type="checkbox" id="chk_2" name="chk" value="b" onclick="changeItem(this, 'chkAll')"/><br />
<input type="checkbox" id="chk_3" name="chk" value="c" onclick="changeItem(this, 'chkAll')"/><br />
<input type="checkbox" id="chk_4" name="chk" value="d" onclick="changeItem(this, 'chkAll')"/><br />
<input type="button" value="Get" onclick="getItems()" />
<script type="text/javascript">
// 全选/全取消
function changeAll(value, itemname) {
$("input[type='checkbox'][name='" + itemname + "']").each(function(i) {
$(this).attr("checked", value);
});
}
// 选中/取消单个
function changeItem(obj, itemall) {
var value = obj.checked;
var name = obj.name;
if (!value) {
$('#' + itemall).attr("checked", value);
} else {
// 在这里可以用length和size()来比较
var checked = ($("input[type='checkbox'][name='" + name + "']").length ==
$("input[type='checkbox'][name='" + name + "']:checked").size());
$('#' + itemall).attr("checked", checked);
}
}
function getItems() {
//alert($("input[type='checkbox']").length);
$("input[type='checkbox'][name='cb']").each(function(i) {
if ($(this).attr("checked")) alert($(this).val());
});
}
</script>
<div style="height: 20px; border-style: dashed; border-width: 1px;">
</div>
<h1>回调函数</h1>
<script type="text/javascript">
function add(a, callback){
var b = callback;
alert(a + b);
}
function negative(c) {
return (-c);
}
</script>
<input type="Submit" name="Submit" value="Submit" onclick="add(4, negative(3));"/>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.cnblogs.com/scripts/jquery/jquery.js"></script>
</head>
<body>
<form id="form1" runat="server">
<input type="checkbox" id="cbAll" name="cbAll" onclick="changeAll(this.checked, 'cb')"/><br />
<input type="checkbox" id="cb_1" name="cb" value="1,11" onclick="changeItem(this, 'cbAll')"/><br />
<input type="checkbox" id="cb_2" name="cb" value="2,22" onclick="changeItem(this, 'cbAll')"/><br />
<input type="checkbox" id="cb_3" name="cb" value="3" onclick="changeItem(this, 'cbAll')"/><br />
<input type="checkbox" id="cb_4" name="cb" value="4" onclick="changeItem(this, 'cbAll')"/><br />
<hr />
<input type="checkbox" id="chkAll" name="chkAll" onclick="changeAll(this.checked, 'chk')"/><br />
<input type="checkbox" id="chk_1" name="chk" value="a" onclick="changeItem(this, 'chkAll')"/><br />
<input type="checkbox" id="chk_2" name="chk" value="b" onclick="changeItem(this, 'chkAll')"/><br />
<input type="checkbox" id="chk_3" name="chk" value="c" onclick="changeItem(this, 'chkAll')"/><br />
<input type="checkbox" id="chk_4" name="chk" value="d" onclick="changeItem(this, 'chkAll')"/><br />
<input type="button" value="Get" onclick="getItems()" />
<script type="text/javascript">
// 全选/全取消
function changeAll(value, itemname) {
$("input[type='checkbox'][name='" + itemname + "']").each(function(i) {
$(this).attr("checked", value);
});
}
// 选中/取消单个
function changeItem(obj, itemall) {
var value = obj.checked;
var name = obj.name;
if (!value) {
$('#' + itemall).attr("checked", value);
} else {
// 在这里可以用length和size()来比较
var checked = ($("input[type='checkbox'][name='" + name + "']").length ==
$("input[type='checkbox'][name='" + name + "']:checked").size());
$('#' + itemall).attr("checked", checked);
}
}
function getItems() {
//alert($("input[type='checkbox']").length);
$("input[type='checkbox'][name='cb']").each(function(i) {
if ($(this).attr("checked")) alert($(this).val());
});
}
</script>
<div style="height: 20px; border-style: dashed; border-width: 1px;">
</div>
<h1>回调函数</h1>
<script type="text/javascript">
function add(a, callback){
var b = callback;
alert(a + b);
}
function negative(c) {
return (-c);
}
</script>
<input type="Submit" name="Submit" value="Submit" onclick="add(4, negative(3));"/>
</form>
</body>
</html>
