用于批准和拒绝的 jquery 复选框

Question

我已经创建了一个逻辑，其中我必须批准和拒绝用户...但问题是说，当我现在批准2个用户，但我必须拒绝1个用户，当我做复选框（批准）其他被取消选中当我使用“id”时，逻辑仅适用于第一个条目，而当使用“类”时，它一次适用于所有什么是批准和拒绝的正确逻辑$('.approve_chk').on('click', function () {    var pswd = prompt("enter password to confirm");    if (pswd == 'approve') {        alert('APPROVED');    } else {        alert('NOT APPROVED');        $(".approve_chk").prop('checked', false);    }});$('.reject_chk').on('click', function () {    var pswd = prompt("enter password to confirm");    if (pswd == 'reject') {        alert('REJECTED');        $(".approve_chk").prop('checked', false);    } else {        alert('NOT REJECTED');        $(".reject_chk").prop('checked', false);    }});

Answer 1

似乎你有多个相同的所以使用classes$(this)

$('.approve_chk').on('click', function () {

    var pswd = prompt("enter password to confirm");

    if (pswd == 'approve') {

        alert('APPROVED');

    } else {

        alert('NOT APPROVED');

        $(this).prop('checked', false);

    }

});

$('.reject_chk').on('click', function () {

    var pswd = prompt("enter password to confirm");

    if (pswd == 'reject') {

        alert('REJECTED');

        $(this).closest('tr').find('.approve_chk').prop('checked', false);

    } else {

        alert('NOT REJECTED');

        $(this).prop('checked', false);

    }

});

工作片段：

$('.approve_chk').on('click', function () {

        var pswd = prompt("enter password to confirm");

        if (pswd == 'approve') {

            alert('APPROVED');

        } else {

            alert('NOT APPROVED');

            $(this).prop('checked', false);

        }

    });

    

    $('.reject_chk').on('click', function () {

        var pswd = prompt("enter password to confirm");

        if (pswd == 'reject') {

            alert('REJECTED');

            $(this).closest('tr').find('.approve_chk').prop('checked', false);

    

        } else {

            alert('NOT REJECTED');

            $(this).prop('checked', false);

        }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr>

    <td>

      <input type="checkbox" id="approve" class="approve_chk" data-id="1">Approve

    </td>

    <td>

      <input type="checkbox" id="reject" class="reject_chk" data-id="1">Reject

    </td>

  </tr>

  <tr>

    <td>

      <input type="checkbox" id="approve" class="approve_chk" data-id="2">Approve

    </td>

    <td>

      <input type="checkbox" id="reject" class="reject_chk" data-id="2">Reject

    </td>

  </tr>

</table>

Answer 2

生成每行的动态 ID 示例 id=“示例 1” id=“示例 2” id=“示例3” 依此类推，然后单击传递该行的编号 单击=“myfunction（1）” onclick=“myfunction（2）” onclick=“myfunction（3）”依此类推。然后在您的函数上获取在单击时传递的数字并与“示例”（您的id前缀）连接。

Answer 3

我假设你的网页有多个和.您必须确保为当前复选框设置属性。您的代码现在使用这些类更新所有复选框。.approve_chk.reject_chk

$('.approve_chk').on('click', function () {

    var pswd = prompt("enter password to confirm");

    if (pswd == 'approve') {

        alert('APPROVED');

    } else {

        alert('NOT APPROVED');

        this.prop('checked', false);

    //  ^ Refers to the clicked element.

    }

});

Answer 4

您需要选中复选框以通过引用 data-id 值来取消选中：

$('.approve_chk').on('click', function () {

    var pswd = prompt("enter password to confirm");

    if (pswd == 'approve') {

        alert('APPROVED');

    } else {

        var thisId = $(this).data(id);

        alert('NOT APPROVED');

        $(".approve_chk[data-id='" + thisId + '").prop('checked', false);

    }

});

$('.reject_chk').on('click', function () {

    var pswd = prompt("enter password to confirm");

    if (pswd == 'reject') {

        alert('REJECTED');

        var thisId = $(this).data(id);

        $(".approve_chk[data-id='" + thisId + '").prop('checked', false);

    } else {

        alert('NOT REJECTED');

        $(".reject_chk").prop('checked', false);

    }

});