Multiselection of Checkbox is not working in JQuery

I have a button for "Select All" that will set all the List of Orders in that Page as checked in checkbox. And I am able to achieve this function with this below code

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

});

I have checkbox each data so that the user can select which data in the list. When selecting orders in the sales orders grid and unselecting, then clicking "Select All", the rows previously selected do not select. Here is the implementation for selecting order.

$(".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 All button and checkbox:

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