前言:本人后端java,因为在郑州工作,不得已要写前端(如果不是生活逼迫,谁愿意这么优秀~).分享一下.
如果喜欢可以关注公众号:码农脱贫 (回复0713可领取java从入门到就业完整资料,还可以加小编微信,获取架构师,前端,pyhon等免费资料,小编要的就是你的一个关注)
一,先学习一下prop小知识:
1 prop定义
prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时,则返回第一个匹配元素的值。
当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对
2 prop语法
1返回属性的值 $(selector).prop(property)
2设置属性和值 $(selector).prop(property,value)3使用函数设置属性和值 $(selector).prop(property,function(index,currentvalue))
4设置多个属性和值 $(selector).prop({property:value,property:value,...})
【参数解释:】
property规定属性的名称
value规定属性的值
function(index,currentvalue)规定要返回设置属性值的函数。
index检索集合元素中的位置;
currentvalue检索被选元素当前的属性值;
案例://全选与反选
$("#quanxuan").click(function(){
//全选时(如果复选框是选择状态会返回true)
if($("#xuanxuan").prop("checked")){
//遍历循环体,并给每一行的复选框赋值为选中状态
$("#xuanze").each(function(){
$("#xuanze").prop("checked",true);
//$("#xuanze").prop("checked","checked");
});
}else{
//反选,遍历循环体
$("#xuanze").each(function(){
$("#xuanze").prop("checked",false);
//$("#xuanze").prop("checked","");
})
}
})
二,学习一个each小知识
1 定义: each()方法规定为每一个匹配的元素规定运行的函数。
2 语法:
$(selector).each(function(index,element))
functon(index,element) 必需。为每个匹配的元素规定运行的函数。
index选择器的位置
element当前元素
升级版,加入前端缓存
全选复选框
<th style="text-align: center"><input type="checkbox" id="quanxuanpltj"></th>
循环体
<td style="text-align:center"><input type="checkbox" name="tzmxbh" class="xuanzepltj" value="${ydhz.tzmxbh}" onclick="getCheckedVal();"></td>
<script>
//全选与反选
$("#quanxuanpltj").click(function () {
if ($("#quanxuanpltj").prop("checked")) {
$(".xuanzepltj").each(function () {
$(".xuanzepltj").prop("checked", true);
getCheckedVal();
});
} else {
$(".xuanzepltj").each(function () {
$(".xuanzepltj").prop("checked", false);
getCheckedVal();
});
}
});
//页面初始化
$(document).ready(function () {
debugger
//把全选框设置为不选中
$("#quanxuanpltj").prop('checked', false);
//在session中的值,设置为选中
for (var j = 0; j < sessionStorage.length; j++) {
var obj = $(".xuanzepltj");
for (var i = 0; i < obj.length; i++) {
var checkbox = obj[i];
var aaa = "dzjcxt_"+checkbox.value;
var bbbb=sessionStorage.key("dzjcxt_"+j);
if (checkbox.value == sessionStorage.key(j)) {
$("input[name='tzmxbh']").eq(i).prop('checked', 'true');
}
}
}
});
//获取复选框选中,未选中的值,并且存储在session中
function getCheckedVal() {
//获取当前页面复选框
var obj = $(".xuanzepltj");
for (var i = 0; i < obj.length; i++) {
var checkbox = obj[i];
//var sss = checkbox.value;
if (checkbox.checked) {
//被选中的存在session中
sessionStorage.setItem(checkbox.value, checkbox.value);
} else {
//未被选中的从session中清除
sessionStorage.removeItem(checkbox.value);
}
}
}
</script>
后续:关注小编公众号:码农脱贫(后台留言可以获取免费资料额)