jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部 |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//1,全选
$("#checkedAll").click(function () {
$("[name=items]:checkbox").attr('checked', true);
});
//2,全不选
$("#checkedNo").click(function () {
$("[name=items]:checkbox").attr('checked', false);
});
//3,反选
$("#checkedRev").click(function () {
$("[name=items]:checkbox").each(function () {
//$(this).attr('checked', !$(this).attr('checked')); //方式一
this.checked = !this.checked; //方式二
});
});
//4,全选/全不选
$("#checkedAllOrNo").click(function () {
$("[name=items]:checkbox").attr("checked", this.checked);
});
//5,提交选中的值
$("#send").click(function () {
var str = "选中的项是:\n\r";
$("[name=items]:checkbox:checked").each(function () {
str += $(this).val() + '\n\r';
});
alert(str);
});
});
</script>
</head>
<body>
<form>
你喜欢的运动?<br />
<label><input name="items" type="checkbox" value="football" />football</label><br />
<label><input name="items" type="checkbox" value="basketball" />basketball</label><br />
<label><input name="items" type="checkbox" value="pingpang" />pingpang</label><br />
<label><input name="items" type="checkbox" value="baseball" />baseball</label><br />
<a id="checkedAll" href="javascript:void(0);">全选</a>-
<a id="checkedNo" href="javascript:void(0);">全不选</a>-
<a id="checkedRev" href="javascript:void(0);">反选</a>-<a id="send" href="javascript:void(0);">提交选中的值</a>-
<label for="checkedAllOrNo">全选/全不选</label>
<input id="checkedAllOrNo" type="checkbox" />
</form>
</body>
</html>