Блог

Главная - Вопросы по программированию - Установите и снимите флажок по строке

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

#php #html #jquery #checkbox

#php #HTML #jquery #флажок

Вопрос:

Добрый день всем…У меня есть несколько строк, которые извлекаются из моей базы данных с помощью цикла foreach.

И у меня есть 2 флажка в каждой строке, что я пытаюсь… Если я установлю 1-й флажок, автоматически нужно будет установить 2-й флажок.

Для этого я использую ID для выбора этого 2-го флажка, теперь из-за того, что идентификатор одинаков для каждой строки, если я выбираю 1-ю строку, 1-й флажок означает, что он выбирает все вторые флажки. Но что мне нужно, так это установить 2-й флажок для этой конкретной выбранной строки. Кто-нибудь поможет. Извините, что не поделился какой-либо живой демонстрацией, такой как jsfiddle. Я надеюсь, что вы, ребята, понимаете мою проблему.

 <thead>
<th><input type="checkbox" id="select_all"></th>
</thead>

<?php foreach ($category_details as $key => $category_detail): ?>
<tr>
<td>

  <input type="checkbox" class="checkbox" id="select_img" name="ids[]" value="<?php echo $category_detail['id'];?>"/>
  <input type="checkbox" class="checkbox checkimg" name="imgs[]" value="<?php echo  $category_detail['category_image'];?>"/>

</td>

<td>...</td> <!-- etc -->
</tr>
<?php endforeach ?> 

     $(document).ready(function(){
    $('#select_all').on('click',function(){
        if(this.checked){
            $('.checkbox').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkbox').each(function(){
                this.checked = false;
            });
        }
    });

    $('#select_img').on('click',function(){
        if(this.checked){
            $('.checkimg').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkimg').each(function(){
                this.checked = false;
            });
        }
    });

    $('.checkbox').on('click',function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
});

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

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

2. я помогу вам, если вы создадите один фрагмент кода с вашим jquery и html-кодом хотя бы с несколькими строками ваших входных элементов

3. о, не могли бы вы, пожалуйста, поделиться своим мнением о коде, который решит мою проблему в jsfiddle

4. Хорошо, я создам

5. проверьте это, добавлена логика выбора всех, когда некоторые флажки не установлены … jsfiddle.net/user1701/62Lv9r4q

Ответ №1:

Вы можете использовать родственную функцию jquery. Например:

 $('.whole_row').on('click',function(){

    if(this.checked){
    
        $(this).siblings().each(function(index, checkbox){
            checkbox.checked = true;
        });
    }else{
         $(this).siblings().each(function(index, checkbox){
            checkbox.checked = false;
        });
    }
});

таким образом, он будет повторять теги siblings и не будет выходить за пределы строк таблицы. Просто используйте классы, а не идентификаторы
Редактировать:

просто примечание по стилю

 $('.whole_row').on('click',function(){
    let check = this.checked;
    $(this).siblings().each(function(index, checkbox){
        checkbox.checked = check;
    });
});

html, подобный этому:

 <tr>
    <input type="checkbox" class="whole_row">one
    <input type="checkbox">two
    <input type="checkbox">three
    <input type="checkbox">four
</tr>