选中并取消选中复选框

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

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

更改重复的{​​{1}}，并相应地更改ids代码的for属性。

这是您的新代码：

label

Answer 2

<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="open1" 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="open2" 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="open3" 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>