Multiselection of Checkbox is not working in JQuery

Question

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="[email protected]"/>
</td>

GMKHussain · Accepted Answer · 2020-07-30 05:02:33Z

1

Try this

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="[email protected]"/> Text 1
</td>
<tr>
</tr>
<td>
    <input type="checkbox" name="SelectOrder" class="SelectOrder" value="@item.OrderId" id="[email protected]"/> Text 2
</td>
</tr>
</table>

answered Jul 30, 2020 at 5:02

GMKHussain

4,8251 gold badge36 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jen143 Over a year ago

Thank you so much for helping.

Collectives™ on Stack Overflow

Multiselection of Checkbox is not working in JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related