JQuery：如何在可切换复选框的页面中查找多个特定的复选框 ID

Question

我已经使用 JQuery 查看了多个 SO 建议。到目前为止，没有什么对我有用。我在 Laravel Blade 文件中有一个充满可切换复选框的页面。 blade 条目被 foreach 语句包围，从而在页面上产生多个切换复选框。这是 blade 文件中的条目：

<div class="custom-control custom-switch">
    <input type="hidden" value="0" name="children[{{$child->child_id}}]">
    <input type="checkbox" class="custom-control-input" id="children[{{$child->child_id}}]" name="children[{{$child->child_id}}]" {{ $child->status ? 'checked' : '' }} value="1">
    <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>

在六次以上的尝试中，这是我做的最后一次。我可以 select 复选框，但我无法识别和隔离每个特定的 child id。

$("input:checkbox").click(function () {
        var names = [];
        $('input:checked').each(function() {
            names.push(this.name);
        });
     });

objective就是收集所有那些从关到开的开关。然后它们将由 ajax 发送到控制器以单独或共同更新。有人可以帮忙吗？非常感谢。

Answer 1

而不是 each 循环，您可以简单地选中更改为 checked 的复选框，如果是，请将其发送到您的后端页面。

演示代码 :

$("input:checkbox").click(function() {
//if checked...
  if (this.checked) {
    var value = this.name.split('children')[1];
    console.log(value)
    //your ajax call here
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children[{{$child->child_id}}]" name="children1" value="1">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children2" name="children2" value="2">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children3" name="children3" value="3">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>

JQuery：如何在可切换复选框的页面中查找多个特定的复选框 ID

JQuery: How to find multiple specific checkbox id's in a page of switchable checkboxes

checkbox

jquery