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


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

ПРОБЛЕМА

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

Вот мой вывод

enter image description here

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

Вот мой код

Для отображения данных и флажков для каждой строки я использую 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
        }
?>
Author: nothingisnecessary, 2015-11-03

7 answers

Простым способом было бы, если бы вы добавили к себе какой-нибудь идентификатор 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>

Таким образом, ваш PHP-код будет выглядеть следующим образом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?php
    for ($i=0; $i<count($opinion); $i++) { ?>
      <tr id="row<?php echo $i ?>">
        <td>
      <input type="checkbox" data-rowid="row<?php echo $i ?>" onchange="toggleRowCbs(this)" 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 } ?>

Потому что это ванильное решение JavaScript, которое использует querySelectorAll, dataset и Array.prototype.forEach это может быть запущено не во всех браузерах, которые вы хотите.

 3
Author: Werner, 2015-11-09 06:52:55

$('.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>
 1
Author: Justas, 2015-11-03 10:38:34

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

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.

ИЗМЕНИТЬ:

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

 1
Author: Fabiano, 2015-11-06 13:11:10
Simple use this : 

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

  });
});
 1
Author: Vivek Tankaria, 2015-11-06 13:20:41

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

 $('.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 строчку больше.

 1
Author: Nikhil Chaudhary, 2015-11-08 06:12:53

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

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

И затем

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

Или

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

$(".yourClassName").attr("checked",true);
 0
Author: Shubham, 2015-11-03 10:42:43

Это решение хорошо работает с динамическими элементами и использует 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>
 0
Author: nothingisnecessary, 2015-11-10 23:03:39