为什么给复选框绑定click事件,只成功执行一次,后续就不行了呢?选不中下面的。
要实现效果:点击第一行复选框,对应的下面的复选框也被选中,取消选中,对应的也取消选中。
测试结果:第一次执行可以成功选中和取消选中,以后就选不中了。
代码截图:
第一次成功:
以后不成功:
代码:
html:
<ul class="qx-ul">
<li>
<div>
<label>档案管理</label>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<ul>
<li>
<label>健康档案</label>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</li>
<li>
<label>慢病档案</label>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</li>
</ul>
</li>
<ul>
jquery部分:
$(document).ready(function(){
var curTr = $('.qx-ul > li');
var curparInput = curTr.find('div > input');
//console.log(curparInput);
//点击父元素 全选子元素
curparInput.click(function () {
console.log('hello');
var curIndex = $(this).index();
var cursonInput = $(this).parent().next().find('input');
if($(this).is(':checked') == true){
console.log('执行了!');
console.log( '执行了,当前索引是' + curIndex);
console.log(cursonInput);
$(cursonInput[curIndex - 1]).attr('checked',true);
$(cursonInput[curIndex + 4]).attr('checked',true);
}else{
console.log('执行了!+1');
console.log( '执行了+1,当前索引是' + curIndex );
console.log(cursonInput);
$(cursonInput[curIndex - 1]).attr('checked',false);
$(cursonInput[curIndex + 4]).attr('checked',false);
}
});
});
求大神指导~。
把 attr 方法替换成 prop