Флажок установлен для каждой строки только с использованием JQuery в шаблоне лезвия

Можно ли с помощью jQuery установить только флажок, принадлежащий строке в таблице внутри шаблона лезвия? У меня есть эта таблица

Я хочу проверить только студентов, принадлежащих к 7-A, без включения студентов из 7-B. Как заставить его работать? Я использую цикл for-each для отображения данных в моей таблице. С моим текущим кодом jQuery он проверит все элементы внутри таблицы.

Просмотр таблицы:

<table class = "table  table-hover table-bordered" > 
  <tr>
    <th>Section</th>
    <th>Student</th>
  </tr>
  @foreach($sections as $section)
  <tr>
    <td>  
      <input type = "checkbox" id = "chckHead" />
      <label>{{$section->section_code}}<label>
    </td>
    <td>  
      @foreach($section->lead as $bt)
      <input type = "checkbox" class = "chcktbl" name = "lead_id[]" value = "{{$bt->id}}">
      <label>{{$bt->student_name}}</label>
      @endforeach
    </td>
  </tr>
  @endforeach
</table>

Сценарий

$('#chckHead').click(function() {
  if (this.checked == false) {
    $('.chcktbl:checked').attr('checked', false);
  } else {
    $('.chcktbl:not(:checked)').attr('checked', true);
  }
});
$('#chckHead').click(function () {
});

javascript jquery laravel checkbox

20.07.2018 15:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

299

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Получите текущую строку таблицы с помощью $(this).parents('tr') и используйте find, чтобы установить флажки в текущей строке.

$('#chckHead').click(function () {
    if (this.checked == false) {
        $(this).parents('tr').find('.chcktbl:checked').attr('checked', false);
    }
    else {
        $(this).parents('tr').find('.chcktbl:not(:checked)').attr('checked', true);
    }
});

или просто сделайте:

$('#chckHead').click(function () {
    $(this).parents('tr').find('.chcktbl:checked').attr('checked', this.checked);
});

пример:

$(document).ready(function(){
  $('.selectAll').on('click', function(){
    $(this).parents('tr').find('.student').prop('checked', this.checked)
  })
})

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td style = "border: 1px solid;vertical-align: top">
      <label>All A<input type = "checkbox" class = "selectAll"></label></td>
    <td style = "border: 1px solid">
      <label>Student A1<input type = "checkbox" class = "student"></label><br>
      <label>Student A2<input type = "checkbox" class = "student"></label><br>
      <label>Student A3<input type = "checkbox" class = "student"></label>
    </td>
  </tr>
  <tr>
    <td style = "border: 1px solid;vertical-align: top">
      <label>All B<input type = "checkbox" class = "selectAll"></label></td>
    <td style = "border: 1px solid">
      <label>Student B1<input type = "checkbox" class = "student"></label><br>
      <label>Student B2<input type = "checkbox" class = "student"></label><br>
      <label>Student B3<input type = "checkbox" class = "student"></label>
    </td>
  </tr>
  <tr>
    <td style = "border: 1px solid;vertical-align: top">
      <label>All C<input type = "checkbox" class = "selectAll"></label></td>
    <td style = "border: 1px solid">
      <label>Student C1<input type = "checkbox" class = "student"></label><br>
      <label>Student C2<input type = "checkbox" class = "student"></label><br>
      <label>Student C3<input type = "checkbox" class = "student"></label>
    </td>
  </tr>

</table>

он работает, но только в первой строке, как мне выполнить эту команду для всей строки

— 20.07.2018 15:19

это потому, что вы используете идентификатор, и вам не разрешено иметь один и тот же идентификатор дважды. измените идентификатор chckHead на класс. Никогда не используйте статические идентификаторы в циклах.

— 20.07.2018 15:21

Хорошо, держись за плохую смену

— 20.07.2018 15:21

поменял селектор на $('#chckHead') тоже на $('.chckHead')?

— 20.07.2018 15:25

.prop('checked', this.checked) - это то, как вы должны использовать его вместо .attr('checked', this.checked). Последний из них вызывает у меня проблемы в моем фрагменте, когда его несколько раз включают и выключают. prop() вроде отлично работает.

— 20.07.2018 15:33

да, это правда .prop работает нормально, когда вы снимаете какой-то флажок, затем снова проверяете все, что он работает, с другой стороны, когда я использую .attr, он не будет проверять выбранный снимаемый флажок, вам нужно обновить страницу, прежде чем вы сможете проверить все, ха-ха

— 20.07.2018 15:41

20.07.2018 15:17