使用 jquery 检查所有复选框答案

【问题标题】：Check all Checkboxes using jquery使用 jquery 检查所有复选框
【发布时间】：2018-09-27 14:56:41
【问题描述】：

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

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

这是我的桌子：

$.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"));
    }
});

【问题讨论】：

check it out
使用类：<input type="checkbox" class="green" />（其他 id 相同）-> $(".class").prop(...) 而不是使用数字 ID
你可以使用$("input[name='colours']").prop('checked', $(this).prop("checked")); 不需要循环
eddie - 这没用，我只想检查 id = green 的那些
尝试了解 jQuery 构造函数中的选择器是如何工作的。现在，您的循环重复将 all 复选框的“checked”属性设置为相同的值，因为$("input:checkbox") 同时选择页面上的所有复选框，然后将“checked”属性应用于所有他们一下子。正如其他人所说，因为选择器可以使语句一次应用于多个元素，所以您实际上并不需要循环。只需根据颜色为所有复选框指定一个类，然后使用例如$(".green") 选择它们。

标签： javascript jquery html asp.net-mvc

【解决方案1】：

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

【讨论】：

你说的这没用是什么意思？有什么错误吗？限制？
$('#SelectAll').click(function () { 调试器; $("input[id^=green]").prop('checked', $(this).prop( "检查")); });
清除缓存？您可以发布您的复选框的 html 吗？
@user1483145 如果你运行它，它可以在上面的代码 sn-p 中工作。如果它在您的环境中不适合您，请找出您的版本与 Eddie 的版本之间的差异。他的建议显然很好，效果很好。
@user1483145 先试试吧，但我不认为这两个版本之间的差异会包括像这样的核心