Установите и снимите флажки

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 должен быть уникальным для каждого элемента.

Изменить дубликат ids и соответственно изменить атрибут for тега label.

Вот ваш новый код:

<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>

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>