Question

我有一点问题，我仍然无法找到解决方案。它是关于我视图中的一个表，每个表行都有自己的复选框。还有一个主要复选框应该检查所有其他复选框，如果我选择它。

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

查看：

// 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脚本没问题，如果我添加＆＃34; select-all＆＃34;类我的<input>标签我的foreach循环的INSIDE以及循环的现场外，所有复选框都被选中。如果我从foreach循环中的字段中删除该类，它就不再起作用了。我现在的问题是我只想用我的主复选框选择所有框。目前，我选择哪个复选框并不重要，每个复选框都将被选中。（所以我不能选择一行或两行。

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

感谢您抽出宝贵时间抱歉我的英语不好

Answer 1

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

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

您无需遍历所有复选框以进行检查。

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

Fiddle

Answer 2

看起来用于挑选子复选框的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>

Answer 3

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

选中Jquery代码复选框，选中所有其他复选框 - 使用Laravel

3 个答案: