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();
});

以下是选中chechbox时应显示的代码：

<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();
        }
    });
});

复选框仅作用一次

1 个答案: