Как использовать jQuery для выбора определенных флажков

Question

Рассмотрим простую страницу .aspx.На этой странице есть разделы, и у каждого раздела есть заголовок с флажком.При выборе он выбирает другие флажки, которые находятся в этом разделе страницы.Думайте об этом как о «Выбрать все в этом разделе», а не «Выбрать все на странице».Я хотел бы сделать это с помощью jQuery, но не могу понять, как сохранить все флажки от выбранных в этом подразделе.

Answer 1

Установите флажки раздела, используя элемент html, который определяет каждый раздел как разделитель.

Например:

<div id="section1">
  <input type="checkbox" id="section1controller" />

   <input type="checkbox" id="section1checkbox1" />       
   <input type="checkbox" id="section1checkbox2" />
   <input type="checkbox" id="section1checkbox3" />
</div>

<script>
  $('#section1controller').bind('click', function() {      
    if($(this).is(':checked')) { 
      $('#section1controller').find('input[type="checkbox"]').attr('checked','checked');
    } 
    else {
      $('#section1controller').find('input[type="checkbox"]').removeAttr('checked','checked');
    }
  });
</script>

Answer 2

Лучший способ - добавить класс в каждый раздел, например section1, section2 и т. Д. Чем целевые все флажки в нем. Например:

$('.section1 input:checkbox').checked == true

Answer 3

попробуйте что-нибудь подобное

вы можете создать div-обертку для заголовка ur и sub_header следующим образом:

<div class="header">
    <input id="xx" type="checkbox" /> Header #1
    <div class="sub_header">
        <input class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
    </div>
<div>
<div class="header">
    <input type="checkbox" /> Header #2
    <div class="sub_header">
        <input class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
        <input  class="cc"  type="checkbox" />
    </div>
<div>

Затем проверьте, установлен ли флажок заголовка, затем выберите sub_header в следующем дочернем элементе div, как показано ниже

$(document).ready(function(){
  $(".header input:checkbox").click(function(){
    if($(this).is(":checked")){
            $(this).parent("div.header").children("div.sub_header").find("input.cc").attr("checked","checked");
}else{
             $(this).parent("div.header").children("div.sub_header").find("input.cc").attr("checked",false);
     }
});

});

Я думаю, вы можете сократить селектор jquery ... проверить это

Answer 4

Поместите каждый раздел в div и div, который разделяет имя класса, или на каждом флажке укажите им имя класса для имени раздела.

<input type=checkbox class="Section1">

, затем в jquery

$("input:checkbox:checked.Section1") должен быть селектором для всех элементов с классом Section1

или

input:checkbox:not(:checked).Section1

вышеизложенное не проверено