Как проверить все флажки с помощью JavaScript в строке таблицы, испускаемой PHP

Я новичок в PHP. Я хочу создать script, чтобы проверить все флажки в строке, но я застрял.

ПРОБЛЕМА

Код не работает с циклом.

Вот мой вывод

Когда я устанавливаю флажок в столбце "Мнение", я хочу автоматически проверять все флажки в той же строке.

Вот мой код

Чтобы отображать данные и флажки для каждой строки, я использую петлю PHP на стороне сервера

JavaScript:

<script>      
$('.allcb').on('click', function() {
    $(this).parent().parent().parent().parent().find('.chk').prop('checked', this.checked);
});
</script>

HTML:

 <?php
        for ($i=0; $i<count($opinion); $i++) {
    //if ($opinion[$i] == "")continue;
        ?>
          <tr>
            <td>
               <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
             <!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />-->

      <input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
      <?php echo $opinion[$i]?>
    </td>
    <td>
      <input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
      <?php echo $action[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
      <?php echo $long_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
      <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
      <?php echo $short_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
      <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
      <?php echo $outlook[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
      <?php echo $rating_type[$i] ?>
    </td>
  </tr>
<?php
        }
?>

Ответы

Ответ 1

Простым способом может быть, если вы добавите к вам некоторый идентификатор TR, чтобы checkbox "знал", какие флажки находятся в одной строке.

Это также было бы возможно путем проверки родительских узлов, но это может быть немного нестабильным (подумайте о реструктуризации таблицы, например).

function toggleRowCbs(cb) {
  var cbs = document.getElementById(cb.dataset.rowid).querySelectorAll('[type="checkbox"]');
  [].forEach.call(cbs, function(x) {
    x.checked = cb.checked;
  });
}

table,
tr,
td,
th {
  border: 1px solid #ccc;
  border-collapse: collapse;
  text-align: left;
  padding: 2pt 4pt;
}

<table>
  <tr>
    <th>Optionion</th>
    <th>Action</th>
    <th colspan="4">Ratings</th>
    <th>Outlook</th>
    <th>Rating Type</th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th colspan="2">Long Term</th>
    <th colspan="2">Short Term</th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th>Current</th>
    <th>Previous</th>
    <th>Current</th>
    <th>Previous</th>
    <th></th>
    <th></th>
  </tr>
  <tr id="row1">
    <td>
      <input type="checkbox" data-rowid="row1" onchange="toggleRowCbs(this)" />Foobar
    </td>
    <td>
      <input type="checkbox" />Maintain
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />Stable
    </td>
    <td>
      <input type="checkbox" />Entity
    </td>
  </tr>
  <tr id="row2">
    <td>
      <input type="checkbox" data-rowid="row2" onchange="toggleRowCbs(this)" />Foobar #2
    </td>
    <td>
      <input type="checkbox" />Maintain
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A+
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />A1
    </td>
    <td>
      <input type="checkbox" />Stable
    </td>
    <td>
      <input type="checkbox" />Entity
    </td>
  </tr>
</table>

Ответ 2

$('.allcb').on('click', function() {
  $(this).parent().siblings().find('.chk').prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
      <?php echo $opinion[$i]?>
    </td>
    <td>
      <input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
      <?php echo $action[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
      <?php echo $long_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
      <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
      <?php echo $short_term[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
      <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
    </td>
    <td>
      <input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
      <?php echo $outlook[$i] ?>
    </td>
    <td>
      <input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
      <?php echo $rating_type[$i] ?>
    </td>
  </tr>
</table>

Ответ 3

Simple use this : 

$(document).ready(function(){
  $('.allcb').on('click', function(){
    $(this).parent("td").parent("tr").find('.chk').prop('checked', this.checked);

  });
});

Ответ 4

Вы можете попробовать это,

 $('.allcb').on('click', function(){  
      $(this).closest('tr').find('.chk').prop('checked', this.checked);  
 });

Или

 $('.allcb').on('click', function(){  
      $(this).parents('tr').find('.chk').prop('checked', this.checked);  
 });

это всего лишь ответ Пекки с еще 1 строкой.

Ответ 5

Вы можете сделать это, добавив ссылку на другие флажки в главный флажок, который вы проверяете. Затем, при нажатии на главный флажок, вы можете управлять другими. Вот так:

JavaScript:

    $('.allcb').on('click', function(){
        var index = $(this).data('index');

        if ($(this).is(':checked'))
        {
            $('.childChk' + index).prop('checked', true);
        }
        else
        {
            $('.childChk' + index).prop('checked', false);
        }
    });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <?php
            for ($i=0; $i<count($opinion); $i++) {
        //if ($opinion[$i] == "")continue;
            ?>
              <tr>
                <td>
                 <!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />-->

          <input type="checkbox" name="opinion[]" class="allcb" data-child="chk" data-index="<?=$i?>" value="<?php echo $opinion[$i]?>" />
          <?php echo $opinion[$i]?>
        </td>
        <td>
          <input type="checkbox" name="action[]" class="chk chkChild<?=$i?>" value="<?php echo $action[$i] ?>" />
          <?php echo $action[$i] ?>
        </td>
        <td>
          <input type="checkbox" name="long_term[]" class="chk chkChild<?=$i?>" value="<?php echo $long_term[$i] ?>" />
          <?php echo $long_term[$i] ?>
        </td>
        <td>
          <input type="checkbox" name="p_long_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
          <?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
        </td>
        <td>
          <input type="checkbox" name="short_term[]" class="chk chkChild<?=$i?>" value="<?php echo $short_term[$i] ?>" />
          <?php echo $short_term[$i] ?>
        </td>
        <td>
          <input type="checkbox" name="p_short_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
          <?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
        </td>
        <td>
          <input type="checkbox" name="outlook[]" class="chk chkChild<?=$i?>" value="<?php echo $outlook[$i] ?>" />
          <?php echo $outlook[$i] ?>
        </td>
        <td>
          <input type="checkbox" name="rating_type[]" class="chk chkChild<?=$i?>" value="<?php echo $rating_type[$i] ?>" />
          <?php echo $rating_type[$i] ?>
        </td>
      </tr>
    <?php
            }
    ?>

Обратите внимание, что я добавил счетчик $i к классу ячеек вашего дочернего элемента. Это не изменит поведение какого-либо элемента DOM.

EDIT:

Вы не можете вызывать библиотеку jQuery внутри цикла. Библиотека jQuery ДОЛЖНА вызываться только один раз. Если вы звоните несколько раз, все представленные здесь решения не будут работать.

Ответ 6

Если вы хотите проверить все флажки с помощью javascript,

Вы можете указать все флажки класса,

а затем

var a = document.getElementsByClassName("yourClassName"); for(var key in a) { a[key].checked = true; }

или

если вы хотите использовать jQuery,

$(".yourClassName").attr("checked",true);

Ответ 7

Это решение отлично справляется с динамическими элементами и использует className для идентификации строки (.option-row) вместо того, чтобы полагаться на tagName, чтобы вы не стремились использовать определенные элементы для отображения данных.

Перед вызовом функции $ убедитесь, что вы включили ссылку на jquery.js (как в примере ниже).

// check or uncheck all boxes with class 'chk' when 'allcb' is clicked
$(document).on('click', '.allcb', function() {
  $('.chk',$(this).closest('.option-row')).prop('checked', this.checked);
});

// simulate PHP; render some rows for demo
var html = [];
for (var i = 0; i < 5; i++) {
  html.push('<tr class="option-row"><td><input type="checkbox" class="allcb cb"/></td><td><input type="checkbox" class="chk"/></td><td><input type="checkbox" class="chk"/></td></tr>');
}
$("tbody").html(html.join(''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Opinion</th>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>