javascript - 使用 jquery 检查所有复选框

Question

我的网页上有一个按钮，单击此按钮后，我想选中表格每一行中的所有绿色复选框。

我不确定这其中的逻辑，希望得到一些帮助

这是我的 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>");
});

这是我的全选按钮

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

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

    var i;

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

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

Answer 1

最好的方法是有一个公共(public)类。但如果你不能，你可以使用 jQuery 通配符选择器，如 [id^=green] 这将选择所有 id 以 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 />