javascript - 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);
            }
        });
});

求大神指导~。

解决方案

把 attr 方法替换成 prop

这篇关于javascript - jQuery操作复选框点击事件只成功执行一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！