Блог

Главная - Вопросы по программированию - установка нескольких флажков в отдельных разделах с помощью jQuery

установка нескольких флажков в отдельных разделах с помощью jQuery

#javascript #php #html #jquery

Вопрос:

У меня есть несколько флажков, разбросанных по нескольким разделам.Во всех отдельных div у меня есть флажок «выбрать все». Когда этот флажок установлен, я пытаюсь выбрать все остальные, связанные с этим пертукулярным div, и когда вы снимаете флажок «выбрать все», он отменяет выбор остальных.

 <div class="actions" id="actions" title="Actions">
   <div>
       <div><input type="checkbox" name="action" id="" class="" value="0" /> Select All</div><br />
       <div><input type="checkbox" name="action" id="" class="" value="1" /> <?php echo $lang["actions"][1]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="2" /> <?php echo $lang["actions"][2]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="3" /> <?php echo $lang["actions"][3]; ?></div><br />

   </div>
   <div>
       <div><input type="checkbox" name="action" id="" class="" value="26" />Select All</div><br />
       <div><input type="checkbox" name="action" id="" class="" value="27" /> <?php echo $lang["actions"][27]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="28" /> <?php echo $lang["actions"][28]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="29" /> <?php echo $lang["actions"][29]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="30" /> <?php echo $lang["actions"][30]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="31" /> <?php echo $lang["actions"][31]; ?></div>
   </div>
</div>

Ответ №1:

Вот пример

В следующий раз покажите нам хотя бы минимум кода, чтобы мы могли помочь вам понять

 $('.selectAll').on('click',function(){
  let isSelected = $(this).is(':checked');
  $(this).parents('.myDiv').find('input[type="checkbox"]').each(function(){
    if( isSelected )
      $(this).prop('checked',true);
    else
      $(this).prop('checked',false);
  })
})


$('input:not(".selectAll")').on('click',function(){
  let selectAllChecked =  $(this).parents('.myDiv').find('.selectAll')[0].checked;
  let numberInput = $(this).parents('.myDiv').find('input').not('.selectAll').length;
  let numberInputChecked = $(this).parents('.myDiv').find('input:checked').not('.selectAll').length;
  
  if( selectAllChecked )
    $(this).parents('.myDiv').find('.selectAll')[0].checked = false;
      
  if( numberInput == numberInputChecked)
    $(this).parents('.myDiv').find('.selectAll')[0].checked = true;
  
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="actions" id="actions" title="Actions">
   <div class="myDiv">
       <div><input type="checkbox" name="action" id="" class="selectAll" value="0" /> Select All</div><br />
       <div><input type="checkbox" name="action" id="" class="" value="1" /> <?php echo $lang["actions"][1]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="2" /> <?php echo $lang["actions"][2]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="3" /> <?php echo $lang["actions"][3]; ?></div><br />

   </div>
   <div class="myDiv">
       <div><input type="checkbox" name="action" id="" class="selectAll" value="26" />Select All</div><br />
       <div><input type="checkbox" name="action" id="" class="" value="27" /> <?php echo $lang["actions"][27]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="28" /> <?php echo $lang["actions"][28]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="29" /> <?php echo $lang["actions"][29]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="30" /> <?php echo $lang["actions"][30]; ?></div><br />
       <div><input type="checkbox" name="action" id="" class="" value="31" /> <?php echo $lang["actions"][31]; ?></div>
   </div>
</div>

Комментарии:

1. Спасибо тебе..!! Все работает нормально. Можем ли мы добавить в это еще одну логику?? например, если какой-либо флажок снят, кроме первого, который является «.selectAll», то флажок». seelectAll» должен автоматически сниматься.

2. Конечно, я отредактировал свой код, если вы хотите увидеть

3. Большое спасибо!! @Фанки

Метки: