复选框的勾选和取消勾选

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>

我使用了标签，这样如果我点击标签复选框就会被选中。 但是这只发生在第一个

中，在其他

中，如果点击标签，则更改会发生在第一个

中。而且，如果我在除第一个以外的其他

上单击标签，则不会选中其他复选框。

- parth pahariya

---

你必须为每个输入提供唯一的ID，这样你才能在标签标记中设置正确的值。 - Will

Answer 1

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

更改重复的id，并相应地更改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>

- void

---

当我运行这段代码片段时，它能够正常工作，每当我点击任何标签时，相应的复选框会被选中。 - void

这是否与我的 jQuery slideUp 和 slideDown 有关？ - parth pahariya

当您点击“运行代码片段”时，您是否看到问题已解决？ - void

它能工作...问题出在哪里？但是每个页面的id应该是唯一的...上面的代码仍然在每个行元素上具有相同的id，但不影响功能... - yjs

$(function(){ var sp=0; var sd; $(".click").click(function(){ if(sp==0) { sp=1; sd=$(this).siblings("#open"); $(this).siblings("#open").slideDown(); } else { sd.slideUp(); if(sd[0]!=$(this).siblings("#open")[0]) { $(this).siblings("#open").slideDown(); } else{ sp=0; $(this).siblings("#open").slideUp(); } sd=$(this).siblings("#open"); } }); }); - parth pahariya

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>

- yjs