Jquery code if checkbox is checked, select all other checkboxes - Working with Laravel

Question

I have a little problem and I still couldn't find a solution. It's about a table in my view and every table row have his own checkbox. There is another main checkbox that should check all other checkboxes, if I'm selecting it.

My problem is that it doesn't work like I want it.

View :

// 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>

The Jquery script is okay, If I add the "select-all" class to my <input> tag INSIDE of my foreach loop and also at the field outsite of the loop, all checkboxes getting selected. If I remove the class from the field inside of my foreach loop, it doesn't work anymore. My problem now is that I only want to select all boxes with my main checkbox.. currently, it doesn't matter which checkbox I select, every checkbox will be selected. ( so I don't have the option to select a single row or two.

the select-all class is just in my main checkbox input field, not in my input field inside of my foreach loop.

thanks for taking your time and sorry for my bad english

Jason Graham · Accepted Answer · 2016-05-30 12:13:04Z

1

It looks like your jQuery selector for picking out the sub check boxes is slightly off. Try:

<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>

edited May 30, 2016 at 12:13

answered May 30, 2016 at 12:08

Jason Graham

9246 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WellNo Over a year ago

this works just perfect!! thank you alot, I'm still learning jquery :)

Jason Graham Over a year ago

You're welcome :)! Although it's worth noting, the "input[type=checkbox]" selector will select all checkboxes on the page (including the select all option). Therefore if you add any more later (even out with the table), they'll be selected/deselected too. Adding a separate class like @Anoop suggested would prevent that.

Anoop Joshi P · Accepted Answer · 2016-05-30 12:06:04Z

1

Add a different class for the sub checkboxes. Then you can do,

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

You don't need to loop through all the checkboxes to check them.

Just use the class selector and prop() method.

Fiddle

answered May 30, 2016 at 12:06

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

1 Comment

WellNo Over a year ago

I see it works but haven't worked for me :/ but thanks anyway, the answer below yours helped me alot :)

Karan Kular · Accepted Answer · 2016-05-30 12:50:55Z

0

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

answered May 30, 2016 at 12:50

Karan Kular

91 bronze badge

Collectives™ on Stack Overflow

Jquery code if checkbox is checked, select all other checkboxes - Working with Laravel

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related