用于批准和拒绝的 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 () {&nbsp; &nbsp; var pswd = prompt("enter password to confirm");&nbsp; &nbsp; if (pswd == 'approve') {&nbsp; &nbsp; &nbsp; &nbsp; alert('APPROVED');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert('NOT APPROVED');&nbsp; &nbsp; &nbsp; &nbsp; $(this).prop('checked', false);&nbsp; &nbsp; }});$('.reject_chk').on('click', function () {&nbsp; &nbsp; var pswd = prompt("enter password to confirm");&nbsp; &nbsp; if (pswd == 'reject') {&nbsp; &nbsp; &nbsp; &nbsp; alert('REJECTED');&nbsp; &nbsp; &nbsp; &nbsp; $(this).closest('tr').find('.approve_chk').prop('checked', false);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert('NOT REJECTED');&nbsp; &nbsp; &nbsp; &nbsp; $(this).prop('checked', false);&nbsp; &nbsp; }});工作片段：$('.approve_chk').on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; var pswd = prompt("enter password to confirm");&nbsp; &nbsp; &nbsp; &nbsp; if (pswd == 'approve') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('APPROVED');&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('NOT APPROVED');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).prop('checked', false);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('.reject_chk').on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; var pswd = prompt("enter password to confirm");&nbsp; &nbsp; &nbsp; &nbsp; if (pswd == 'reject') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('REJECTED');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).closest('tr').find('.approve_chk').prop('checked', false);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('NOT REJECTED');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).prop('checked', false);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <input type="checkbox" id="approve" class="approve_chk" data-id="1">Approve&nbsp; &nbsp; </td>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <input type="checkbox" id="reject" class="reject_chk" data-id="1">Reject&nbsp; &nbsp; </td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <input type="checkbox" id="approve" class="approve_chk" data-id="2">Approve&nbsp; &nbsp; </td>&nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; <input type="checkbox" id="reject" class="reject_chk" data-id="2">Reject&nbsp; &nbsp; </td>&nbsp; </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 () {&nbsp; &nbsp; var pswd = prompt("enter password to confirm");&nbsp; &nbsp; if (pswd == 'approve') {&nbsp; &nbsp; &nbsp; &nbsp; alert('APPROVED');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert('NOT APPROVED');&nbsp; &nbsp; &nbsp; &nbsp; this.prop('checked', false);&nbsp; &nbsp; //&nbsp; ^ Refers to the clicked element.&nbsp; &nbsp; }});

Answer 4

您需要选中复选框以通过引用 data-id 值来取消选中：$('.approve_chk').on('click', function () {&nbsp; &nbsp; var pswd = prompt("enter password to confirm");&nbsp; &nbsp; if (pswd == 'approve') {&nbsp; &nbsp; &nbsp; &nbsp; alert('APPROVED');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; var thisId = $(this).data(id);&nbsp; &nbsp; &nbsp; &nbsp; alert('NOT APPROVED');&nbsp; &nbsp; &nbsp; &nbsp; $(".approve_chk[data-id='" + thisId + '").prop('checked', false);&nbsp; &nbsp; }});$('.reject_chk').on('click', function () {&nbsp; &nbsp; var pswd = prompt("enter password to confirm");&nbsp; &nbsp; if (pswd == 'reject') {&nbsp; &nbsp; &nbsp; &nbsp; alert('REJECTED');&nbsp; &nbsp; &nbsp; &nbsp; var thisId = $(this).data(id);&nbsp; &nbsp; &nbsp; &nbsp; $(".approve_chk[data-id='" + thisId + '").prop('checked', false);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; alert('NOT REJECTED');&nbsp; &nbsp; &nbsp; &nbsp; $(".reject_chk").prop('checked', false);&nbsp; &nbsp; }});