Question

我的网页上有按钮，当点击此按钮时，我想选择表格每行中的所有绿色复选框。

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

这是我的表：

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

最好的办法是建立一个共同的班级。但是如果你不能，你可以使用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 />

使用jquery检查所有复选框

1 个答案: