在 db 中显示所有数据并在 Javascript 中使用 for 循环答案

【问题标题】：Display all data in db and use for loop in Javascript在 db 中显示所有数据并在 Javascript 中使用 for 循环
【发布时间】：2021-05-27 10:33:12
【问题描述】：

我有一个复选框，如果选中，它将重新启用一行中的所有输入文本框。目前的状态是我只能在第一行做。

这是我的代码：

@foreach($kucings as $cat)
    <tr>
      <th scope="row">
         <input type="hidden" name="" value="">
         <input type="checkbox" id="name" name="name" value="{{$cat->id}}"/>&nbsp;&nbsp;
         {{$cat->name}}
      </th>
      <td><input type="number" id="age" value="" disabled /></td>
      <td><input type="number" id="weight" value="" disabled /></td>
      <td><input type="number" id="height" value="" disabled /></td>
    </tr>
 @endforeach

下面是我的javascript：

<script>
  document.getElementById('name').onchange = function() {
    document.getElementById('age').disabled = !this.checked;
    document.getElementById('weight').disabled = !this.checked;
    document.getElementById('height').disabled = !this.checked;
  };
</script>

【问题讨论】：

您的问题有两个方面。您的 onchange 事件仅与一行挂钩，因为您使用的是 ID，如果您希望将其应用于所有人，只需使用类。其次，如果您尝试提交启用了两行年龄、体重和身高的表单，则只会保存最后一行。因此，在您的 name 属性中，您需要将其设置为 <input name="input[0][name]" 和下一行 input[1][name] 以及其余部分，以便 PHP 正确处理完整的输入
对我来说太复杂了。你能告诉我解决方案吗？我试过这个已经快一周了
我猜你的目标是保存所有 3 行，如果这些行被启用，对吧？但我的声明仍然存在，使用类而不是 ID，并使用数组名称组，以便您可以保存启用的多行
感谢您的建议。通过循环应用脚本需要时间，现在它的工作。现在我正在努力将数据提交到数据库部分

标签： javascript php html laravel laravel-8

【解决方案1】：

您不能有多个元素具有相同的id。您可以像这样拥有动态的id，并为每个人添加事件侦听器。

  @foreach($kucings as $key => $cat)
    <tr>
      <th scope="row">
         <input type="hidden" name="" value="">
         <input type="checkbox" id="name-{{$key}}" name="name" value="{{$cat->id}}"/>&nbsp;&nbsp;
         {{$cat->name}}
      </th>
      <td><input type="number" id="age-{{$key}}" value="" disabled /></td>
      <td><input type="number" id="weight-{{$key}}" value="" disabled /></td>
      <td><input type="number" id="height-{{$key}}" value="" disabled /></td>
    </tr>
 @endforeach

<script>
  let catCount = {{count($kucings)}};
  for (let i = 0; i < catCount.length; i++) {
    document.getElementById('name-'+i).onchange = function() {
      document.getElementById('age-'+i).disabled = !this.checked;
      document.getElementById('weight-'+i).disabled = !this.checked;
      document.getElementById('height-'+i).disabled = !this.checked;
    }
  };
</script>

【讨论】：

谢谢.. 但是这段代码对我不起作用。我正在使用 Laravel 8 进行网络开发
@wanprogrammer 你能告诉我不支持哪种语法吗？
没有错误显示，显示界面。但是当检查复选框时，它无法为所有文本框运行。我以前的代码可以在一行上运行。 span>