如何使整个 li 元素可单击以切换复选标记？

Answer 1

看起来你正在使用 JQuery，所以我只是添加了一些小更改：

  $('div.list-checkbox').on('click',function() {
    var $cb = $(this).find("checkbox");
    if (!$cb.attr("checked")) {
      $cb.attr("checked", true);
    } else {
      $cb.attr("checked", false);
    }
  });

希望对您有帮助。

Answer 2

试试这个：

<label><input type="checkbox">List value 1</label>
<label><input type="checkbox">List value 2</label>
<label><input type="checkbox">List value 3</label>

Answer 3

以下是执行此操作的步骤：

1. 向

   checkbox

   input

   元素添加 id 属性，例如

   id="check1"

2. 将所有应响应单击的标记放入标签元素中，并添加一个

   for

   属性，其中

   id

   值为上面的 1，例如

   for="check1"

<div class="list-checkbox list-group list-button mx-auto mt-2">
  <button class="list-group-item d-flex justify-content-between align-items-center">
    <label for="check1">
      <span>Option 1</span>
      <label class="checkboxCustom my-auto">
      <input type="checkbox" checked="checked" id="check1">
      <span class="checkmark"></span>
      </label>
      </label>
   </button>
 </div>

Answer 4

div.acc {
  position: relative;
}
input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
h2 {
  font-size: 30px;
  font-weight: 400;
  color: #4a19ff;
  margin: 20px 0 0;
}
label {
  cursor: pointer;
}
label {
  position: relative;
  display: block;
  padding-left: 30px;
  font-family: "Spicy Rice", cursive;
}
label::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 10px;
  border-left: 8px solid black;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-top: -8px;
}
input[type="checkbox"]:checked ~ h2 label::before {
  border-left: 8px solid transparent;
  border-top: 8px solid black;
  border-right: 8px solid transparent;
  margin-left: -4px;
  margin-top: -4px;
}

p {
  max-height: 0;
  overflow: hidden;
  padding-left: 30px;
  transition: max-height 0.4s ease;
  font-family: "Habibi", serif;
}
input[type="checkbox"]:checked ~ h2 ~ p {
  max-height: 80px;
}

body {
  background: #fffefa;
}

<div class="acc">
        <input type="checkbox" id="faq-1">
        <h2><label for="faq-1">How much?</label></h2>
        <p>She said for $300 she'll do it.</p>
        </div>
        
        <div class="acc">
        <input type="checkbox" id="faq-2">
        <h2><label for="faq-2">How many cans must I stack up?</label></h2>
        <p>As many as you need to wash you out from my mind and out of my consciousness.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        </div>