复选框单击功能不起作用

Checkbox click function is not working

本文关键字：不起作用功能单击复选框更新时间：2023-09-26

我正在尝试使用AngularJS、Jquery和MVC实现一件非常简单的事情，这是我在早期项目中实现的。有一张带有checkbox的表。表头包含一个复选框，当我单击复选框时，表中的所有复选框都将被选中，反之亦然。这是一种非常常见的检查/取消检查功能。

html代码：

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

javascript是：

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

全选/取消全选功能运行良好，但单击表中的单个复选框不起作用，即当我单击复选框时，"select（）"功能不会调用，警报也不起作用。

感谢您的帮助。

使用ng-click而不是click

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

或者，可能对于复选框，您也可以使用ng-change，它在复选框中的值完全更改后触发：

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

这两者之间有一个非常微妙的区别。

我已经更改了javascript，它现在可以工作了。脚本如下：

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