Question

我可以点击tr，然后会选中复选框。然后，我可以再次点击tr，然后取消选中该复选框。但是，如果我尝试第三次（或更高）单击相同的tr，则脚本将不再有效。我使用prop()而不是``attr（）尝试了这个脚本的几个版本，但它仍然表现出相同的行为。为什么呢？

HTML：

<tr onclick="checkBox('ID')" id="recordID">
    <td>
        <input type="checkbox" name="myRecords[]" id="myRecordsID" value="ID">
    </td>
</tr>

jquery的：

function checkBox(ID) {
    $(document).on("click",'#record'+ID,function(){
        $(document).on("click",'input#myRecords'+ID,function(e){
            e.stopPropagation();
        });
        var ischecked = $('input#myRecords'+ID).is(":checked");
        if(ischecked) {
            $('input#myRecords'+ID).removeAttr("checked");
        } else {
            $('input#myRecords'+ID).attr("checked", "checked");
        }
    });
});

Answer 1

我相信你的问题源于两件事：

拥有嵌套的侦听器
永久性假阳性

HTML：

<tr id="recordID"> <!-- remove the onclick, you are already listening for it -->
    <td>
        <input type="checkbox" name="myRecords[]" id="myRecordsID" value="ID" />
    </td>
</tr>

jquery的：

function checkBox(ID) {
    // move this listener outside so it does not require a click to activate
    $(document).on("click",'input#myRecords'+ID, function(e){
        e.stopPropagation();
    });
    $(document).on("click",'#record'+ID,function(){
        var ischecked = $('input#myRecords'+ID).is(":checked");
        if(ischecked) {
            // use .prop, while your method will check and uncheck the box
            // it will not work properly with jquery's .is(":checked");
            // eventually resulting in a permanent false positive
            $('input#myRecords'+ID).prop('checked', false);
        } else {
            $('input#myRecords'+ID).prop('checked', true)
        }
    });
};
checkBox('ID'); // activates listeners

http://jsfiddle.net/fresheyeball/K8L57/

如果我正在写这个http://jsfiddle.net/fresheyeball/3qped/

HTML：

<tr class="record">
    <td>
        <input type="checkbox" name="myRecords[]" value="ID" />
    </td>
</tr>

jQuery的：

$('.record').on('click',function(){
    var checkBox = $(this).find('input');
    checkBox.prop('checked', !checkBox.prop('checked'));
});

Answer 2

有嵌套代码，我想知道你应用on（）jquery函数的方式是否正确。

可以简化为：

   <table>
    <tr id="recordID12" class="myRecordEntry">
        <td>
            <input type="checkbox" name="myRecords[]" id="myRecordsID12" value="ID">
        </td>
    </tr>
    <tr id="recordID15" class="myRecordEntry">
        <td>
            <input type="checkbox" name="myRecords[]" id="myRecordsID15" value="ID">
        </td>
    </tr>
</table>


$(document).ready(function () {
    $(".myRecordEntry").click(function (e) {
        var id = e.currentTarget.id;
        var idnr = id.match(/\d+/g);
        var chk = $("#myRecordsID" + idnr).is(":checked");
        if (chk == false) {
            $("#myRecordsID" + idnr).prop("checked", true);
        } else {
            $("#myRecordsID" + idnr).prop("checked", false);
        }
    });
});

小提琴：http://jsfiddle.net/djwave28/p8Sr8/4/

修改您想要的可能是使用您的记录集合生成多行，因此表行可能具有不同的ID。我已经使代码适应这种需要。

为什么我的条件jquery脚本只能工作一次？

2 个答案: