选中复选框的递增/递减计数

Question

我希望对切换进行计数，但它们不是。当我按下其中一个时，计数器增加到1 并卡住。当我减少计数器时，它是-1。

预期结果是，当开关打开时，计数器会增加 (counter++)，而当它关闭时，计数器应该减少 (counter--)。

切换是在 Bootstrap 中创建的。

(function() {
  $(() => {
    let counter = 0
    for (let index = 1; index < 10; index++) {
      let div = $("<div>").addClass("custom-control custom-switch");
      let myLabel = createLabel("toggle" + index);
      let myCheckbox = createCheckbox("toggle" + index, counter);

      $(div).append(myCheckbox, myLabel);
      $("#container").append(div);
    }
  });
})();

function createLabel(id) {
  return $(`<label for=${id} class=custom-control-label>${id}&nbsp;</label>`);
}

function createCheckbox(id, counter) {
  return $(`<input type=checkbox class=custom-control-input id=${id}>`).click(() => {
    onCheckBoxSwitchToggled(id, counter);
  });
}

function onCheckBoxSwitchToggled(id, counter) {
  $(`input[id=${id}`).on("change", function() {
    if (counter < 6) {
      if ($(this).prop("checked") === true) {
        counter++
        $("#text").text(counter)
      } else {
        counter--
        $("#text").text(counter)
      }
    } else {
      alert("over than 5")
    }
  });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="container"></div>
<p id="text"></p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>
<div class="container" data-toggle="modal" data-target="#myModal">
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">The chosen coins</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您的代码中有很多问题。

• 您使用的是 IIFE 而不是 document.ready 处理程序
• 您正在将一个函数放置在一个 jQuery 对象中。不要那样做。在这种情况下，无论如何您都不需要它，只需将逻辑放在 document.ready 处理程序中，以便在 DOM 加载时执行。
• 您正在使用属性选择器而不是实际的 id 选择器选择 id。该属性选择器也缺少结束 ]
• div 已经保存了一个 jQuery 对象，你不需要把它放在另一个对象中。
• 您创建的复选框输入缺少name 和value 属性。
• 在复选框和单选输入上使用change 事件，而不是click。这是出于可访问性的原因。
• 对动态内容使用单个委托事件处理程序，而不是在每次创建元素时附加一个新的事件处理程序克隆
• 删除onCheckBoxSwitchToggled 中的嵌套事件处理程序。您不需要它，因为无论如何与复选框交互时该事件已经运行。

但是，您的逻辑的主要问题是您依赖于全局定义的 counter 参数。相反，只需使用 length 属性和 :checked 选择器来获取选中框的数量。

下面是一个工作示例。请注意，createLabel() 和 createCheckbox() 方法现在几乎完全是多余的，可以删除。试试这个：

jQuery($ => {
  for (let index = 1; index < 10; index++) {
    let $div = $("<div>").addClass("custom-control custom-switch");
    let $label = createLabel("toggle" + index);
    let $checkbox = createCheckbox("toggle" + index);
    $div.append($checkbox, $label);
    $("#container").append($div);
  }
  
  $('#container').on('change', ':checkbox', function() {
    let counter = $(':checkbox:checked').length;
    $('#text').text(counter);
  
    if (counter > 5)
      console.log("over  5")
    });
});

function createLabel(id) {
  return $(`<label for="${id}" class="custom-control-label">${id}&nbsp;</label>`);
}

function createCheckbox(id) {
  return $(`<input type="checkbox" class="custom-control-input" id="${id}" name="foo" value="${id}">`)
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="container"></div>
<p id="text"></p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>
<div class="container" data-toggle="modal" data-target="#myModal">
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">The chosen coins</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>