多选复选框在 JQuery 中不起作用

Question

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

$("#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";
    }

});

我在每个数据上都打了复选框，这样用户就可以select列表中的哪些数据。在销售订单网格中 selecting 订单并取消 selecting，然后单击“Select 全部”时，先前 selected 的行不会 select。这是 selecting 订单的实现。

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

Select 所有按钮和复选框：

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

Answer 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>

多选复选框在 JQuery 中不起作用

Multiselection of Checkbox is not working in JQuery

javascript

checkbox

jquery

asp.net-mvc-4