如何在PHP发出的表行中使用JavaScript检查所有复选框

Question

我是PHP的新手.我想创建一个脚本来检查连续的所有复选框,但我被卡住了.

问题

代码不适用于循环.

这是我的输出

当我选中Opinion列下的复选框时,我想自动检查同一行中的所有复选框.

这是我的代码

为每行呈现数据和复选框,我使用服务器端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
        }
?>

Answer 1

一种简单的方法是，如果您向TRs 添加一些标识符，以便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它可能无法在您想要的所有浏览器上运行。