如果选中复选框，则 Jquery 代码选择所有其他复选框 - 使用 Laravel答案

【问题标题】：Jquery code if checkbox is checked, select all other checkboxes - Working with Laravel如果选中复选框，则 Jquery 代码选择所有其他复选框 - 使用 Laravel
【发布时间】：2016-09-28 06:08:07
【问题描述】：

我有一个小问题，但我仍然找不到解决方案。在我看来，这是关于一个表格，每个表格行都有自己的复选框。如果我选择它，还有另一个主复选框应该检查所有其他复选框。

我的问题是它不像我想要的那样工作。

查看：

// thats the main checkbox, that should select all other checkboxes 

<th><input type="checkbox" class="select-all"/>All</th>
 // and some other non important <th> fields 


 all table rows 

                @foreach($products as $product)
                    <tr>
                        <td>
                            // every line checkbox
                            <input type="checkbox" name="id[]" value="{{$product->id}}">
                        </td>
                        <td>{{ $product->name  }}</td>
                        <td>{{ $product->tld  }}</td>
                        <td>
                            @foreach($product->tags as $tag)
                                {{$tag->name}},
                            @endforeach
                        </td>
                        <td>{{ $product->created_at->format('d.m.y')  }}</td>
                    </tr>
                @endforeach

jquery

<script type="text/javascript">
    $(document).ready(function() {
        $('.select-all').on('click', function() {
            if(this.checked) {
                $('.select-all').each(function() {
                    this.checked = true;
                });
            }
            else {
                $('.select-all').each(function() {
                    this.checked = false;
                });
            }
        });
    });
</script>

Jquery 脚本没问题，如果我将“全选”类添加到我的 foreach 循环内部的 <input> 标记以及循环外的字段中，所有复选框都会被选中。如果我从我的 foreach 循环内的字段中删除该类，它就不再起作用了。我现在的问题是我只想用我的主复选框选择所有框。目前，我选择哪个复选框并不重要，每个复选框都会被选中。（所以我没有选择单行或两行的选项。

全选类只是在我的主复选框输入字段中，而不是在我的 foreach 循环内的输入字段中。

感谢您抽出宝贵的时间，对不起我的英语不好

【问题讨论】：

标签： jquery html laravel checkbox

【解决方案1】：

看起来您用于挑选子复选框的 jQuery 选择器有点偏离。试试：

<script type="text/javascript">
    $(document).ready(function() {
        $('.select-all').on('click', function() {
            var checkAll = this.checked;
            $('input[type=checkbox]').each(function() {
                this.checked = checkAll;
            });
        });
    });
</script>

【讨论】：

这非常完美！！非常感谢，我还在学习 jquery :)
不客气 :)！尽管值得注意的是，“input[type=checkbox]”选择器将选中页面上的所有复选框（包括全选选项）。因此，如果您稍后再添加（即使在表格之外），它们也会被选中/取消选中。添加像@Anoop 建议的单独类可以防止这种情况发生。

【解决方案2】：

为子复选框添加不同的类。那你就可以了，

$(".select-all").change(function() {
  $(".subCheckbox").prop("checked", this.checked);
});

您不需要遍历所有复选框来检查它们。

只需使用类选择器和prop() 方法。

Fiddle

【讨论】：

我看到它有效，但对我没有用：/但无论如何，谢谢，你下面的答案对我有很大帮助:)

【解决方案3】：

$(".select-all").change(function() {
   $(this).closest('table').find('input[type=checkbox]').prop('checked',this.checked);})

【讨论】：