javascript - 复选框只生效一次

Question

当复选框被选中时，删除和复选框计数器按钮应该像 Chrome 历史记录一样显示，如果你检查任何访问过的页面，标题会发生变化如果我点击第二行，它不会显示。

<tbody>
{% for item in items %}
    <th scope="row"><input type="checkbox" id="check" name="wpmm[]"></th>
    <td>{{ item.item_name }}</td>
    <td>{{ item.sku }}</td>
    <td>{{ item.quantity }}</td>
{% endfor %}
</tbody>

这是脚本:

var fnUpdateCount = function () {
  var generallen = $("input[name='wpmm[]']:checked").length;
  if (generallen > 0) {
    $("#general i .counter").text('(' + generallen + ')');
  } else {
    $("#general i .counter").text(' ');
  }
};

$("input:checkbox").on("change", function () {
  fnUpdateCount();
});

$('.select_all').change(function () {
  var checkthis = $(this);
  var checkboxes = $("input:checkbox");

  if (checkthis.is(':checked')) {
    checkboxes.prop('checked', true);
  } else {
    checkboxes.prop('checked', false);
  }
  fnUpdateCount();
});

这是选中复选框时应显示的代码:

<div class="row justify-content-between start-dash mb-4" id="general">
  <div class="col-6">
    <h4 class="text-left mt-4">Selected Items: <span class="counter"></span></h4>
  </div>
</div>

为此使用此代码:

$('#general').hide();
$(function () {
  $('#check').on('change', function () {
    if ($('#check').prop('checked')) {
      $('#item_info').hide();
      $('#general').show();
    } else {
      $('#item_info').show();
      $('#general').hide();
    }
  });
});

Answer 1

试试这个:

$(function () {
    $('body').on('change','#check', function (e) {
        e.preventDefault();
        if ($(this).prop('checked')) {
            $('#item_info').hide();
            $('#general').show();
        } else {
            $('#item_info').show();
            $('#general').hide();
        }
    });
});