Checkbox click function is not working

Question

I am trying to implement a very simple thing using AngularJS, Jquery and MVC, which I have implemented in my early project. There is a table with checkbox. The table header contains a checkbox and when I click in checkbox all checkboxes inside the table will be selected and vice versa. It is a very common check/uncheck functionality.

The html code:

<div class="panel panel-primary">
    <div class="panel-heading">Category List</div>
    <div style="padding: 5px">
        <div class="col-md-6">
            <a class="btn btn-danger" ng-click="removeSelectedRows()" ng-controller="categoryMultiDeleteController"><i class="glyphicon glyphicon-trash"></i>Delete</a>
            <a class="btn btn-primary" href="#/category/newcategory"><i class="glyphicon glyphicon-file"></i>New</a>
        </div>

        <div class="col-xs-10 col-lg-6 col-md-6">
            <div class="input-group">
                <input type="text" id="searchText" class="form-control pull-right" placeholder="Search for..." ng-model="search_txt">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <i class="text-muted glyphicon glyphicon-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="table table-responsive">
            <table class="table table-striped" id="mytable">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="checkAll" name="checkAll">
                        </th>
                        <th>Category Name</th>
                        <th>Description</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="category in categories | filter:search_txt | itemsPerPage: pageSize" current-page="currentPage">
                        <td style="padding-left: 9px; padding-top: 1px; padding-bottom: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">
                                <input type="checkbox" id="chkCategoryId" name="chkCategoryId" click="select()"/>
                            </div>
                        </td>
                        <td style="padding: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">{{category.categoryName}}</div>
                        </td>
                        <td style="padding: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">{{category.description}}</div>
                        </td>
                        <td style="padding: 1px; vertical-align: middle">
                            <div style="height: 35px; overflow: auto;">
                                <a class="btn btn-primary" href="#/category/{{category.categoryID}}" title="Edit">
                                    <i class="glyphicon glyphicon-edit"></i></a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="text-center">
        <dir-pagination-controls boundary-links="true"
            on-page-change="pageChangeHandler(newPageNumber)"
            template-url="app/dirPagination.tpl.html"
            style="height: 30px; padding: 2px">
        </dir-pagination-controls>
    </div>
</div>

The javascript is:

<script type="text/javascript">
    $(document).ready(function () {
        $('#checkAll').change(function () {
            if (!$('#checkAll').prop('checked')) {
                $('input[type="checkbox"]').each(function () {
                    $('input[type="checkbox"]').prop('checked', false);
                    $(this).checked = false;
                });
            } else {
                $('input[type="checkbox"]').each(function () {
                    $("input[name='chkCategoryId']").prop("checked", true);
                    $(this).checked = true;
                });
            }
        });

        function select() {
            alert("ok");
        };
    });
</script>

The select/deselect all functionally is working well but clicking on a single checkbox inside the table is not working i.e. when I click on a checkbox the `select()`` function is not invoking and alert is not working.

Any help will be thankfully accept.

Possible duplicate of [Angular checkbox and ng-click](http://stackoverflow.com/questions/20290738/angular-checkbox-and-ng-click) — Malkus, Dec 04 '15 at 15:57

score 1 · Answer 1 · answered Dec 04 '15 at 15:56

Use ng-click instead of click

<input type="checkbox" id="chkCategoryId" name="chkCategoryId" ng-click="select()"/>

Or, probably for checkboxes, you can also use ng-change which triggers after the value in the checkbox changed completely:

<input type="checkbox" id="chkCategoryId" name="chkCategoryId" ng-change="select()"/>

There is a very subtle difference between these two.

score 0 · Answer 2 · answered Dec 04 '15 at 17:59

I have changed javascript and it is working now. The script is like:

$(document).on('change', 'input[name="chkCategoryId"]', function () {
            if ($('input[name="chkCategoryId"]').length == $('input[name="chkCategoryId"]:checked').length) {
                $("input[name='checkAll']").prop("checked", true);
                $(this).checked = true;
            }
            else {
                $("input[name='checkAll']").prop("checked", false);
                $(this).checked = false;
            }
        });

Checkbox click function is not working

2 Answers2

Linked