<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框应用</title>
<script src="../../js/jquery-1.4.4.min.js"></script>
</head>
<body>
<form >
你爱好的运动是？<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
<input type="button" id="CheckedAll" value="全选" />
<input type="button" id="CheckedAllNo" value="全不选" />
<input type="button" id="CheckedRev" value="反选" />
<input type="button" id="send" value="提交" />
</form>
<!--<form style="display:none" >
你爱好的运动是？<br />
<input type="button" id="CheckedAll" value="全选/全不选" />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
</form>-->
<script>
$(function ()
{
//全选
$("#CheckedAll").click(function () {
$(‘[name=items]:checkbox‘).attr("checked", true); //attr() 方法设置或返回被选元素的属性值。
//下面只是研究,或者是可参考,（我还没弄懂）
//判断如果当前复选框被选中
//if (this.checked) {
// $(‘[name=items]:checkbox‘).attr("checked", true); //attr() 方法设置或返回被选元素的属性值。
//}
//else {
// $(‘[name=items]:checkbox‘).attr("checked", false); //attr() 将checked 设置为false即被全不选。
//}
//$(‘[name=items]:checkbox‘).attr("checked", this.checked); //attr() 方法设置或返回被选元素的属性值。
//可以去掉if判断
//$(‘[name=items]:checkbox‘).click(function () {
// var flag = true;
// $(‘[name=items]:checkbox‘).each(function () {
// if (!this.checked) {
// flag = false;
// }
// });
// $("#checkedall").attr("checked", flag);
//})
});
//全不选
$("#CheckedAllNo").click(function () {
$(‘[name=items]:checkbox‘).attr("checked", false); //attr() 将checked 设置为false即被全不选。
});
//反选,如果选中，则不选中，如果不选中则选中
//$("#CheckedRev").click(function () {
// $(‘[name=items]:checkbox‘).each(function () {
// $(this).attr("checked", !$(this).attr("checked")); //$(this)取出当前对象并转换为jQuery对象
// })
//});
//代码简化反选
$("#CheckedRev").click(function () {
$(‘[name=items]:checkbox‘).each(function () {
this.checked = !this.checked;
})
});
//提交显示选中的check值
$("#send").click(function ()
{
var str = "你选中的是\r\n";
$(‘[name=items]:checkbox:checked‘).each(function () {
str += $(this).val() + "\r\n";
});
alert(str)
})
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/chaonuanxi/p/10336230.html
时间： 2024-10-30 04:14:46