1

我可以点击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");
        }
    });
});
4

2 回答 2

1

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

  1. 有嵌套的监听器
  2. 永久性误报

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'));
});
于 2013-04-07T01:17:26.880 回答
0

有嵌套代码，我想知道您应用 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。我已经使代码适应这种需要。

于 2013-04-07T01:36:10.183 回答