locked
Run JQuery On All Grids On Page RRS feed

  • Question

  • User-410261901 posted

    I have been using this syntax to specify one grid on my page, but now I have 3.  They all belong to CssClass="Grid" -> is there a way to apply the below JQuery to all grids on the page and not have to specify each grid by name?

    <script>
        $(document).ready(function () {
        $("#<%=gvFirst.ClientID %> input:checkbox").each(function () {
                this.onclick = function () { if (!this.checked) { $(this).closest('tr').css('display', 'none'); } }
            })
            $('#<%=gvFirst.ClientID%>').find("input:checkbox").prop('checked', true);        
        });
    </script>

    EDIT -->

    I tried this syntax, but it does not give an error in the console - however it does not work either.

    <script>
        $(document).ready(function () {
            $('.Grid').each(function (i) {
                this.onclick = function () { if (!this.checked) { $(this).closest('tr').css('display', 'none'); } }
            })
        });
    </script>

    Wednesday, January 10, 2018 7:53 PM

Answers

  • User2103319870 posted

    HiThereItsClaire

    I tried this syntax, but it does not give an error in the console - however it does not work eithe

    You are accessing the Gridview directly using css, You need access the checkbox inside each gridview 

    Change your code like below

     <script>
                $(document).ready(function () {
                    $(".Grid input:checkbox").each(function () {
                        this.onclick = function () { if (!this.checked) { $(this).closest('tr').css('display', 'none'); } }
                    })
                    $('.Grid').find("input:checkbox").prop('checked', true);
                });
            </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 10, 2018 8:39 PM

All replies

  • User2103319870 posted

    HiThereItsClaire

    I tried this syntax, but it does not give an error in the console - however it does not work eithe

    You are accessing the Gridview directly using css, You need access the checkbox inside each gridview 

    Change your code like below

     <script>
                $(document).ready(function () {
                    $(".Grid input:checkbox").each(function () {
                        this.onclick = function () { if (!this.checked) { $(this).closest('tr').css('display', 'none'); } }
                    })
                    $('.Grid').find("input:checkbox").prop('checked', true);
                });
            </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 10, 2018 8:39 PM
  • User475983607 posted

    Try

    <script>
        $(document).ready(function () {
            $('.Grid').find('input:checkbox').each(function () {
                this.onclick = function () { if (!this.checked) { $(this).closest('tr').css('display', 'none'); } }
            })
        });
    </script>

    Wednesday, January 10, 2018 8:39 PM