jQuery——复选框操作
2024-08-27 07:11:34
学习jQuer对表单、表格操作的过程中，按照书上的例子发现一个问题：
<!DOCTYPE html>
<html>
<head>
<title>复选框应用</title>
<style type="text/css">
form{
border:1px solid #ccc;
width:300px;
padding:10px;
margin:auto;
}
</style>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//书上如此添加按钮事件处理——问题：当单击触发了反选事件之后，再次点击“全选”、“全不选”按钮不起作用，需要按照如下修改，即使用each()方法，才可以；或者将attr()方法修改为prop()方法也可实现预期
// $("#CheckedAll").click(function(){
// $("[name=items]:checkbox").attr("checked",true);//或者将attr()方法修改为prop()方法也可实现预期
// });
// $("#CheckedNo").click(function(){
// $("[name=items]:checkbox").attr("checked",false);//或者将attr()方法修改为prop()方法也可实现预期
// }); $("#CheckedAll").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=true;
});
});
$("#CheckedNo").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked=false;
});
});
$("#CheckedRev").click(function(){
$("[name=items]:checkbox").each(function(){
// $(this).attr("checked",!$(this).attr("checked"));
this.checked=!this.checked;
});
});
$("#send").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox").each(function(){
if(this.checked)
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</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="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选"/>
<input type="button" id="send" value="提交"/>
</form>
</body>
</html>
以下代码同样使用prop()函数，使用attr()方法也不能实现预期
<!DOCTYPE html>
<html>
<head>
<title>复选框应用</title>
<style type="text/css">
form{
border:1px solid #ccc;
width:500px;
padding:10px;
margin:auto;
font-size:20px;
}
</style>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#CheckedAll").click(function(){
$("[name=items]:checkbox").prop("checked",this.checked);
}); $("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked)
flag=false;
});
// alert($("#CheckedAll")[0]);
// alert($("#CheckedAll")[0].getAttribute("checked"));
//此处使用attract()方法，在IE中和在chrome中均不能实现预期，需要修改为prop()方法
// $("#CheckedAll").attr("checked",flag);
$("#CheckedAll").prop("checked",flag);
// alert($("#CheckedAll").prop("checked"));//使用attr()时，返回undifined
}); $("#CheckedRev").click(function(){
$("[name=items]:checkbox").each(function(){
// $(this).prop("checked",!$(this).attr("checked"));
this.checked=!this.checked;
});
});
$("#send").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox").each(function(){
if(this.checked)
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>
</head>
<body>
<form>
你爱好的运动是？<input type="checkbox" id="CheckedAll" value="全选/全不选" />全选/全不选<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="CheckedRev" value="反选"/>
<input type="button" id="send" value="提交"/>
</form>
</body>
</html>
最新文章
- C#/winform 自动触发鼠标、键盘事件
- Replication的犄角旮旯（一）--变更订阅端表名的应用场景
- 【追寻javascript高手之路05】理解事件流
- 数据源DBCP一二
- [under the hood]Reduce EXE and DLL Size with LIBCTINY.LIB
- oracle 笔记
- hdu4462 Scaring the Birds
- Hibernate 、多表关联映射-组件关联映射（component）
- python--内建函数(1)
- 我的mfc基础知识点
- DotNetCore跨平台~认识环境和环境变量
- 【学习总结】GirlsInAI ML-diary day-15-读/写txt文件
- 【Math for ML】线性代数-单射,满射,双射,同构,同态,仿射
- 修复恢复"可疑"的SQLServer数据库
- hibernate源码分析1
- Java并发编程：线程池的使用（转载）
- 一篇写得很好的关于lct的博客
- [SoapUI] 在SoapUI中通过Groovy脚本执行window命令杀掉进程
- Python sys.md
- C#集合与泛型集合