操作表单全选、全不选、反选效果。demo代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作表单全选、全不选、反选效果</title>
<styletype="text/css">
<!--
#div1{
width:980px;
margin:0 auto;
position:relative;
text-align:left;
padding-left:400px;
line-height:30px;
border:1px dotted #0075c5;
}
li{
display:block;
list-style:none;
float:left;
position:relative;
padding-left:20px;
}
.clr{
height:20px;
}
-->
</style>
</head>
<body>
<div id="div1">
<div class="clr"></div>
<!--选项开始-->
<input type="checkbox"/>Web前端之家<br/>
<input type="checkbox"/>Web前端之家<br/>
<input type="checkbox"/>Web前端之家<br/>
<input type="checkbox"/>Web前端之家<br/>
<input type="checkbox"/>Web前端之家<br/>
<input type="checkbox"/>Web前端之家<br/>
<!--选项结束-->
<!--功能按钮开始-->
<input type="button" id="selAll" value="全选"/>
<input type="button" id="unselAll" value="全不选"/>
<input type="button" id="reverse" value="反选 "/>
<!--功能按钮结束-->
<div class="clr"> </div>
</div>
<script src="/demo/js/jq.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#selAll").click(function () { //":checked"匹配所有的复选
$("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中
});
$("#unselAll").click(function () {
$("#div1 :checkbox").attr("checked", false);
});
//理解用迭代原理each(function(){})
$("#reverse").click(function () {
$("#div1 :checkbox").each(function () {
$(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态：如果选中则取反
});
});
});
</script>
</body>
</html>
网友评论文明上网理性发言 已有0人参与
发表评论: