复选框的多选在 JQuery 中不起作用答案

【问题标题】：Multiselection of Checkbox is not working in JQuery复选框的多选在 JQuery 中不起作用
【发布时间】：2020-07-30 04:30:18
【问题描述】：

我有一个“全选”按钮，它将将该页面中的所有订单列表设置为选中复选框。我可以用下面的代码来实现这个功能

$("#SelectAll").on("click", function () {
    var txt = $(this).val();
    if (txt === 'Select All') {
        $(this).val("Unselect All");
        $("input[name='SelectOrder']").attr('checked', true);
        document.getElementById('bulk-action').style.display = "block";
    }
    else {
        $(this).val("Select All");
        $("input[name='SelectOrder']").attr('checked', false);
        document.getElementById('bulk-action').style.display = "none";
    }

});

我对每个数据都有复选框，以便用户可以选择列表中的哪些数据。在销售订单网格中选择订单并取消选择时，然后单击“全选”，之前选择的行不会被选中。这是选择顺序的实现。

$(".SelectOrder").on("click", function () {
    var idVal = $(this).val();
    var idData = "#tdid-" + idVal;
    if (idVal.checked == true) {
        $(idData).attr('checked', false);
    } else {
        $(idData).attr('checked', true);
    }
    document.getElementById('bulk-action').style.display = "block";
    GetSelectedOrdersBulk();
});

function GetSelectedOrdersBulk() {
    var checkedVals = $('.SelectOrder:checkbox:checked').map(function () {
        var orderId = this.value;
        return orderId;
    }).get();

    if (checkedVals.length == 0) {
        document.getElementById('bulk-action').style.display = "none";
    }
    return checkedVals;
}

全选按钮和复选框：

 <input type="button" class="btn btn-info btn-xs" name="SelectAll" value="Select All" id="SelectAll" />

<td>
    <input type="checkbox" name="SelectOrder" class="SelectOrder" value="@item.OrderId" id="tdid-@item.OrderId"/>
</td>

【问题讨论】：

标签： javascript jquery asp.net-mvc-4 checkbox

【解决方案1】：

试试这个

jQuery("#SelectAll").click(function(){
        jQuery(this).toggleClass("checkedall");
        
    if ( jQuery(this).hasClass("checkedall") ) {
       jQuery(".SelectOrder").prop("checked", true);
       jQuery(this).val("Unselect All");
    } else {
       jQuery(this).removeClass("checkedall");
       jQuery(".SelectOrder").prop("checked", false);
       jQuery(this).val("Select All");
    }                        
  
});

.checkedall {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input type="button" class="btn btn-info btn-xs" name="SelectAll" value="Select All" id="SelectAll" />

<table>
<tr>
<td>
    <input type="checkbox" name="SelectOrder" class="SelectOrder" value="@item.OrderId" id="tdid-@item.OrderId"/> Text 1
</td>
<tr>
</tr>
<td>
    <input type="checkbox" name="SelectOrder" class="SelectOrder" value="@item.OrderId" id="tdid-@item.OrderId"/> Text 2
</td>
</tr>
</table>

【讨论】：

非常感谢您的帮助。