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

Posted 2023-02-24

技术标签:

【中文标题】如何在 PHP 发出的表格行中使用 JavaScript 检查所有复选框【英文标题】：How to Check All Checkboxes using JavaScript in a table row emitted by PHP 【发布时间】：2016-02-03 11:07:04 【问题描述】：

我是 php 新手。我想创建一个脚本来检查一行中的所有复选框，但我卡住了。

问题

代码不适用于循环。

这是我的输出

当我选中意见列下的复选框时，我想自动选中同一行中的所有复选框。

这是我的代码

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

【问题讨论】：

$(this).closest('tr').find('.chk').prop('checked', this.checked); 选中同一行中所有具有 chk 类的复选框行是动态添加的吗？ @fuyushimoya 我使用循环在行中打印我的数据然后检查控制台，是抱怨$ 未定义还是什么？或者这个<script> 出现在head？最好将该函数包装在 domready 中以确保目标元素存在。 @fuyushimoya 一切正常，我刚刚在 Chkboxes 中发出问题 【参考方案1】：

$('.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>

【讨论】：

更新了table和tr标签和jQuery选择器。【参考方案2】：

如果您想使用 javascript 检查所有复选框，

你可以给所有的复选框一个类，

然后

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

或

如果你想使用 jQuery，

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

【讨论】：

【参考方案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);  
 );

这只是 Pekka 的回答，多了 1 行。

【讨论】：

+1 Sunny 肯定做错了，因为这对我有用，而且我在企业网络应用程序中一直使用这样的解决方案。（或者做过，直到我开始使用AngularJS）【参考方案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 元素的行为。

编辑：

您不能在循环内调用 jQuery 库。必须只调用一次 jQuery 库。如果您多次调用，这里提供的所有解决方案都将不起作用。

【讨论】：

您是否删除了 $(document).ready 声明？我放在这里仅供参考，你不应该在你的代码中使用。只需获取功能实现和 HTML 代码中的更改即可。我编辑删除了 document.ready。删除$(document).ready后，我复制您的代码并粘贴，但仍然无法正常工作我现在已经编辑了 HTML 部分。尝试复制它并检查它现在是否有效。您必须在代码中只调用一次 jQuery 库，否则将不起作用。如果打印索引变量怎么办？请告诉我在 javascript 代码中执行 alert(index) 时会得到什么。让我们调试一下。【参考方案6】：

一种简单的方法是，如果您向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  ?>

因为这是一个使用 querySelectorAll、dataset 和 Array.prototype.forEach 的原生 JavaScript 解决方案，所以它可能无法在您想要的所有浏览器上运行。

【讨论】：

这对我有用，但 OP 标记为 jQuery 那么为什么不做安全和浏览器无关的事情并使用它呢？ @nothingisnecessary 因为我想提供一个不同的（vanilla JS）解决方案。 @Werner 如果您看到我的代码，我会使用循环打印我的复选框。它不适合我 @Werner 非常感谢。你创造了我的生活【参考方案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>

【讨论】：

以上是关于如何在 PHP 发出的表格行中使用 JavaScript 检查所有复选框的主要内容，如果未能解决你的问题，请参考以下文章

Connection.php 第 729 行中的 QueryException：SQLSTATE[23000]：Laravel 5.2

如何在表格视图行中有多个单元格？

如何清除表格行中元素的换行？

如何在表格行中显示对象数组

如何在html表格行中向iframe添加动态纬度和经度

如何在反应js中获取表格行中的点击事件