复选框只生效一次答案

【问题标题】：Checkbox has effect only once复选框只生效一次
【发布时间】：2019-05-06 18:39:54
【问题描述】：

选中复选框时，如果您检查任何访问过的页面标题更改，则删除和复选框计数器按钮应显示为 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();
    }
  });
});

【问题讨论】：

看起来您有多行带有复选框输入，所有行都具有相同的 id。这是错误的，一个 id 在整个 HTML 文档中必须是唯一的。您的 id 选择器 $('#check') 只选择它遇到的第一个。使用类或其他属性。
如果您在文档中没有任何其他需要不同行为的复选框输入，则可以使用$('input[type=checkbox]')。或者将data-myfunction 属性添加到输入字段，以便您可以使用选择器$('input[data-myfunction]')。
在您的文档中也是 #item-info 和 #general 唯一 div 还是它们也重复？同样的事情，ID 必须是唯一的。

标签： javascript jquery django

【解决方案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();
        }
    });
});

【讨论】：