html - 选中和取消选中复选框

Question

我有三个分区，每个分区包含 3 个复选框。

<div class="options">
  <div class="offers">
    <form action="">
      <div class="multiselect">
        <div class="selectBox click">
          <select class="select">
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="open" class="box">
          <input type="checkbox" id="one" />
          <label for="one" class="i">First checkbox</label>
          <input type="checkbox" id="two" />
          <label for="two">Second checkbox </label>
          <input type="checkbox" id="three" />
          <label for="three">Third checkbox</label>
        </div>
      </div>
    </form>
  </div>
  <div class="offers">
    <form action="">
      <div class="multiselect">
        <div class="selectBox click">
          <select class="select">
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="open" class="box">
          <label for="one">
            <input type="checkbox" id="one" />First checkbox</label>
          <label for="two">
            <input type="checkbox" id="two" />Second checkbox </label>
          <label for="three">
            <input type="checkbox" id="three" />Third checkbox</label>
        </div>
      </div>
    </form>
  </div>
  <div class="offers">
    <form action="">
      <div class="multiselect">
        <div class="selectBox click">
          <select class="select">
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="open" class="box">
          <label for="one">
            <input type="checkbox" id="one" />First checkbox</label>
          <label for="two">
            <input type="checkbox" id="two" />Second checkbox </label>
          <label for="three">
            <input type="checkbox" id="three" />Third checkbox</label>
        </div>
      </div>
    </form>
  </div>
</div>

我使用了标签，这样如果我点击标签复选框就会被选中。 但它只发生在第一个 div 和其他 div 中，如果点击标签更改发生在第一个 div 中。而且如果我点击除第一个复选框以外的其他 div 上的标签，则不会选中

Answer 1

所以问题是您的页面中没有唯一的 id。元素 id 对每个元素都应该是唯一的。

更改重复的 ids 并相应地更改 label 标签的 for 属性。

这是您的新代码:

<div class="options">
  <div class="offers">
    <form action="">
      <div class="multiselect">
        <div class="selectBox click">
          <select class="select">
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="open" class="box">
          <input type="checkbox" id="one_1" />
          <label for="one_1" class="i">First checkbox</label>
          <input type="checkbox" id="two_1" />
          <label for="two_1">Second checkbox</label>
          <input type="checkbox" id="three_1" />
          <label for="three_1">Third checkbox</label>
        </div>
      </div>
    </form>
  </div>
  <div class="offers">
    <form action="">
      <div class="multiselect">
        <div class="selectBox click">
          <select class="select">
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="open" class="box">
          <label for="one_2">
            <input type="checkbox" id="one_2" />First checkbox</label>
          <label for="two_2">
            <input type="checkbox" id="two_2" />Second checkbox</label>
          <label for="three_2">
            <input type="checkbox" id="three_2" />Third checkbox</label>
        </div>
      </div>
    </form>
  </div>
  <div class="offers">
    <form action="">
      <div class="multiselect">
        <div class="selectBox click">
          <select class="select">
            <option>Select an option</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="open" class="box">
          <label for="one_3">
            <input type="checkbox" id="one_3" />First checkbox</label>
          <label for="two_3">
            <input type="checkbox" id="two_3" />Second checkbox</label>
          <label for="three_3">
            <input type="checkbox" id="three_3" />Third checkbox</label>
        </div>
      </div>
    </form>
  </div>
</div>