您的位置：首页 > Web前端 > JQuery

jquery学习之1.21-小练习4实现对复选框的全选，全不选，反选

2014-03-30 11:26 477 查看

通过prop和removeAttr方法实现对复选框的全选，全不选，反选。

效果图如下：

代码如下：

<%@ page language="java" import="java.util.*"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>11</title>
<style type="text/css">
body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.js">
</script>
<script language="javascript">
$(document).ready(function()
{
$("#ckAll").click(function(){
if(this.checked)
{
alert("aaa");
$("input[name='items']").prop("checked","checked");
/*备注：此时如果是用attr代替prop，会出现第二次选中这个checkbox的时候，
21              无法实现后面的checkbox全部选中。
我的理解：第一次点击全选，所有选中，再点击，则取消全选，
此时会把属性checked删除，删除后attr使用时由于checked属性不存在，故无法赋值。需要看attr和prop源代码才能知道其中的区别，学习中，详细原理可以看 http://blog.csdn.net/chaiyining007/article/details/8218038 */
}
else
{
alert("bbb");
$("input[name='items']").removeAttr("checked");
}
});
$("#ckNall").click(function (){
$("input[name='items']").removeAttr("checked");
});
$("#ckAll2").click(function (){
$("input[name='items']").prop("checked","checked");
});
$("#fanxuan").click(function(){
$("input[name='items']").each(function(){
if(this.checked){
$(this).removeAttr("checked");
}
else{
$(this).prop("checked","checked");
}
});

});

});

</script>
</head>
<body>
<div>
<input type="checkbox" id="ckAll" value="全选或者全不选">全选/全不选</input>
<input type="checkbox" id="ck1" name="items" value="上小学">上小学</input>
<input type="checkbox" id="ck2" name="items" value="上中学">上中学</input>
<input type="checkbox" id="ck3" name="items" value="上大学">上大学</input>
<br/>
<input type="button" id="ckAll2"  value="全选"/>
<input type="button" id="ckNall" value="全不选"/>
<input type="button" id="fanxuan" value="反选"/>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航