首页 > jQuery操作复选框点击事件只成功执行一次

jQuery操作复选框点击事件只成功执行一次

为什么给复选框绑定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);
            }
        });
});

求大神指导~。


http://jsfiddle.net/ws9j4v1v/11/


把 attr 方法替换成 prop


没错下次可以记住,复选框用户prop,而不是attr

【热门文章】
【热门文章】