Select All function not working properly in jquery

Question

I have a search bar and a table below it which has a select all option. The Select All function works fine but when I search something in the search bar and then Click on the Select All button, nothing happens. I am not able to figure out why is it so?

Here is my code for Select All function

    function selectUnselectchkAllProcessedOrders() {
    debugger
    $("#chkAllProcessedOrders").click(function () {
        var checked_status = this.checked;
        $("input[name='fulfillmentOrderId']").each(function () {
            this.checked = checked_status;

            if (checked_status)
                $(this).parent().parent().addClass('greanBackGround');
            else
                $(this).parent().parent().removeClass('greanBackGround');
        });

    });
}

when i click the Select All checkbox after clicking the search button, i can see using debugger that when the selectUnselectchkAllProcessedOrders() function is called, this.checked is undefined.

Here is the cshtml

  <div>
        <table>
            <tr>
                <td>
                    <label>Order Number</label></td>
                <td>
                    <input type="text" id="TextBoxFullFillmentOrderNumber" 
/></td>
                <td>
                    <input type="submit" name="ButtonSearch" value="Search" 
/>
                    <input type="hidden" name="posearchorderno" 
id="posearchorderno" />
                    <input type="hidden" name="search" value="some" />
                </td>

            </tr>
            <tr></tr>
        </table>
    </div>
    }

Please click the `<>` and create a [mcve] with plain rendered html. I assuming your asp creates the html like your want so it’s not an asp question — mplungjan, Jul 10 '18 at 05:35
No. Click the snippet editor and create a running snippet with ONLY script and HTML. We cannot test cshtml without a server — mplungjan, Jul 10 '18 at 05:48
See duplicate. I could have closed it 20 min ago if you had posted HTML instead of CSHTML in a [mcve] — mplungjan, Jul 10 '18 at 05:59
@mplungjan sorry i didn't know raw html has to be posted instead of cshtml. i hope it is fine now. thanks. — S.J.Lee, Jul 10 '18 at 06:06
Just for next time. You are asking a question completely unrelated to ASP so post relevant html, script and css. If the question is about asp, of course post asp relevant code — mplungjan, Jul 10 '18 at 06:09

Bhushan Kawadkar · Accepted Answer · 2018-07-10T06:12:41.577

1

Try this: You are trying to bind click event for dynamically created checkbox so use .on as shown below

$(document).on("click","#chkAllProcessedOrders", function () {
    var checked_status = this.checked;
    $("input[name='fulfillmentOrderId']").each(function () {
        this.checked = checked_status;

        if (checked_status)
            $(this).parent().parent().addClass('greanBackGround');
        else
            $(this).parent().parent().removeClass('greanBackGround');
    });

});

edited Jul 10 '18 at 06:12

answered Jul 10 '18 at 05:49

Bhushan Kawadkar

28,279
5
35
57

this works perfectly. can you please explain what was going wrong? sorry i didn't get you, I'm not good with jquery! – S.J.Lee Jul 10 '18 at 05:57
@S.J.Lee, After search you are creating new html elements to show result along with select all button. so previously attached click handler for `"#chkAllProcessedOrders"` will not work as it got destroyed. JQuery provided a way to bind event handler for dynamically created element. Please check more details on http://api.jquery.com/on/ – Bhushan Kawadkar Jul 10 '18 at 06:02
thanks a lot ! that helped! – S.J.Lee Jul 10 '18 at 06:08

Select All function not working properly in jquery

1 Answers1