Check all Checkboxes using jquery

Question

I have button on my web page, and when this button is clicked I want to select all of the green check boxes in each row of my table.

I am unsure of the logic for this and would appreciate some help

This is my table:

$.each(JSON.parse(result), function (i, item) {
    var row = i + 1;

    $("#mainData").append(
        "<tr>" +
        "<td id='process_" + row + "'" + ">" + item.Process + "</td>" +
        "<td id='checks_" + row + "'" + ">" + item.Checks + "</td>" +
        "<td>" +

        "<div class='btn-group' data-toggle='buttons'" + ">" +

        "<label class='btn btn-success'" + ">" +
        "<input type='checkbox' name='colours' id='green_" + row + "'" + ">" +
        "<span class='glyphicon glyphicon-ok'" + "></span>" +
        "</label>" +

        "<label class='btn btn-warning'" + ">" +
        "<input type='checkbox' name='colours' id='yellow_" + row + "'" + ">" +
        "<span class='glyphicon glyphicon-ok'" + "></span>" +
        "</label>" +


        "<label class='btn btn-danger'" + ">" +
        "<input type='checkbox' name='colours' id='red_" + row + "'" + ">" +
        "<span class='glyphicon glyphicon-ok'" + "></span>" +
        "</label>" +


        "<label class='btn btn-default'" + ">" +
        "<input type='checkbox' name='colours' id='grey_" + row + "'" + ">" +
        "<span class='glyphicon glyphicon-ok'" + "></span>" +
        "</label>" +

        "</td>" +
        "<td><textarea id=" + "'" + "comments_" + row + "'" + "type='text' placeholder='' class='form-control input-md'/></td>" +

        "</tr>");
});

this is my select all button

 $('#SelectAll').click(function () {

    var rowCount = $('#mainData >tr').length;

    var i;

    for (i = 1; i <= rowCount; i++) {

        $("input:checkbox").prop('checked', $(this).prop("checked"));
    }
});

Instead of using numerated ids use a class: <input type="checkbox" class="green" /> (the same for the other ids) -> $(".class").prop(...) — Andreas
– Andreas, Commented Apr 17, 2018 at 15:05
You can use $("input[name='colours']").prop('checked', $(this).prop("checked")); No need for a loop — Eddie
– Eddie, Commented Apr 17, 2018 at 15:07
eddie - this didnt work, i only want the ones with id = green to be checked — user1483145
– user1483145, Commented Apr 17, 2018 at 15:09
try to understand how the selectors in your jQuery constructor work. Right now your loop repeatedly sets the "checked" property of all the checkboxes to the same value, because $("input:checkbox") selects all checkboxes on the page simultaneously, and then applies the "checked" property to all of them at once. As others have said, because the selector can make the statement apply to multiple elements at once, you don't really need the loop. Just make it more targeted by giving all the checkboxes a class according to their colour and then using e.g. $(".green") to select them. — ADyson
– ADyson, Commented Apr 17, 2018 at 15:10

Eddie · Accepted Answer · 2018-04-17 15:20:12Z

2

The best approach for this is to have a common class. But in case you can't, you can use jQuery wildcard selector like [id^=green] This will select all elements with id starting with green

$('#SelectAll').click(function() {
  //This will select all inputs with id starting with green
  $("input[id^='green']").prop('checked', $(this).prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="SelectAll"> Select All Green<br />
<input type="checkbox" name='colours' id='green_1'>Green 1<br />
<input type="checkbox" name='colours' id='green_2'>Green 2<br />
<input type="checkbox" name='colours' id='blue_1'>Blue 1<br />
<input type="checkbox" name='colours' id='blue_2'>Blue 2<br />
<input type="checkbox" name='colours' id='red_1'>Red 1<br />

edited Apr 17, 2018 at 15:20

answered Apr 17, 2018 at 15:14

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

9 Comments

Eddie Over a year ago

What do you mean by this hasnt worked? Any errors? Restrictions?

user1483145 Over a year ago

$('#SelectAll').click(function () { debugger; $("input[id^=green]").prop('checked', $(this).prop("checked")); });

Eddie Over a year ago

Clear your cache? Can you post an html of your checkbox?

ADyson Over a year ago

@user1483145 it works in the code snippet above, if you run it. If it doesn't work for you in your environment, play spot the difference between your version and Eddie's. His suggestion is clearly good and works nicely.

ADyson Over a year ago

@user1483145 well try that first, but I don't think the differences between the two versions would include something as core as this

|

Collectives™ on Stack Overflow

Check all Checkboxes using jquery

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related