选中所有 Checkboxes 道具，但我只想触发一个复选框

Question

我有可以 "add to favorite" 的项目列表，在本例中我使用复选框，因此用户可以选中复选框以添加到收藏夹，反之亦然，取消选中复选框以从收藏夹中删除。

流程应该是这样的：

当复选框未选中时，用户单击它，它将被选中
当复选框被选中并且用户点击它时，它会触发一个模式，要求他们确认他们是否真的想从收藏夹中删除该项目。在弹出窗口中，有一个确认按钮，当用户点击它时，它会取消选中复选框并关闭弹出窗口。

下面是 html 元素

    <div class="star_wrap">
      <input type="checkbox" /><label onclick="confirmLabelRemove(this)"><label>
    </div>
    i put the click event in label to trigger the input before it to be checked or unchecked

下面是为每个复选框生成唯一 ID 的代码

    var listItems = $(".star_wrap"); // the container of each checkbox
    listItems.each(function (idx) {
    $(this).find('input').attr('id', 'chkbox' + idx);
    //$(this).find('label').attr('for', 'chkbox' + idx); I don't want this 
    feature because If I click on the label it will prop check the 
    checkbox before the pop up modal show up.
});

下面是触发道具检查事件的代码

    function confirmLabelRemove(obj) {
    var thisLabelInput = $(obj).prev(); // find the input before the label

    if ($(thisLabelInput).is(':checked')) {
    overlayConfirmShow(); // transparent layer to prevent back content clickable
    $('.confirmation_box').addClass('show'); // show the pop up modal

    $('#confirmBoxConfirm').on('click', function () {
        $(obj).prev().prop('checked', false);
        $(obj).closest('.grid-item').addClass('unfav');
        overlayConfirmHide();
        $('.confirmation_box').removeClass('show');
     });
    } else {
      $(obj).closest('.grid-item').removeClass('unfav');
      $(obj).prev().prop('checked', true);
     }
    }

如果只有 1 个复选框，则效果很好。但是当它们是复选框列表时，取消选中和选中复选框中的 1 将触发先前选中或未选中的复选框。请指教，谢谢

Answer 1

当此行不止一次运行 ($('#confirmBoxConfirm').on('click', function () {) 且它们未被删除时，您实际上将多个处理程序附加到单击事件。这意味着在点击时，之前设置的每个处理程序将运行.

您可以先尝试删除它：

$('#confirmBoxConfirm').off('click').on('click', function () {

或者如果您已经有其他点击处理程序并且只想删除这个，它必须是一个命名函数：

function theClick() {
    $(obj).prev().prop('checked', false);
    $(obj).closest('.grid-item').addClass('unfav');
    overlayConfirmHide();
    $('.confirmation_box').removeClass('show');
};

$('#confirmBoxConfirm').off('click', theClick).on('click', theClick);

选中所有 Checkboxes 道具，但我只想触发一个复选框

All Checkboxes prop checked but I only want ONE checkbox to be triggered

checkbox

jquery

prop