选中和取消选中所有复选框并使用下拉菜单执行操作

Question

在我的表格中，我有一列用于复选框，当用户勾选它应该选择下面的所有其他复选框时，如果我再次单击它，则该功能会取消选择所有复选框。我还添加了下拉菜单，因此如果用户勾选第一个框并选择添加选项，那么它应该调用一些 ajax 方法。这就是我所做的：

 var ajReq = new XMLHttpRequest();
    $(document).ready(function () { Table();});

function Table(data) {
        var DisplayTable = '<table><tr><th>Name</th><th>Name2</th><th><input type="checkbox" id="SelectCheckbox"/></th></tr>';
        var counts= 0;
        for (var getdata in data) {
            var row = '<tr class=\'row\'select=\'' + data[getdata ].ID+ '\'</tr>';

            counts+= '<td>' + data[getdata].Name+ '</td>';
            counts+= '<td>' + data[getdata].Name2+ '</td>'


            counts+= '<td><input type="checkbox" class="SomeAjaxMethod" methd-DoSomething= "' + data[getdata ].ID+'"></td>'

            counts++;
            DisplayTable += counts;
        }
  table += '</table></div>';
        $('#DisplayTable').html(DisplayTable ); }

        <div id="DisplayTable"></div>

$(function () {
        $("#SelectCheckbox").click(function () {
            $(".SomeAjaxMethod").attr('checked', this.checked);
        });

        $(".SomeAjaxMethod").click(function () {
            if (this.checked == false) {
                $("#SelectCheckbox").attr('checked', false);
            }
        });
    });

当我向#SelectCheckBox 添加断点时，它会在页面加载时执行，它应该在我选中一个复选框后执行。 我也在使用下拉菜单来执行一些操作，我如何将复选框附加到下拉菜单，例如在选择了我要删除的所有员工之后，我已经写了 SQL 删除语句我只想知道如何我将复选框与我的下拉菜单链接。这是我的下拉菜单：

<div class="dropdown">
    <div class="btn-group">
        <button type="button" id="id1" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Select...
  <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="Delete-staff">Attended Detention</a></li>
            <li><a class="Edit-Staff">Letter Sent</a></li>
        </ul>
    </div>
</div>

Answer 1

为带有复选框的列添加一个 CSS 类。然后使用 jQuery 同时选中/取消选中每个复选框。您的 HTML 应如下所示：

<table id="myTable">
    <tr><th>Name</th><th>Name2</th><th><input type="checkbox" 
        id="SelectCheckbox"/></th></tr>
    <tr>
        <td>Name1 from row 1</td>
        <td>Name2 from row 1</td>
        <td class="check"><input type="checkbox" class="SomeAjaxMethod"
            onclick="method_DoSomething('id-from-row-1')"></td>
    </tr>
    ... (more rows
</table>

你的 JavaScript 是这样的：

function checkUncheckEverything() {
    var isChecked = $('#SelectCheckbox').is(':checked');
    $('#myTable > tbody > tr > td.check > input').prop('checked', isChecked);
}
$('#SelectCheckbox').on('click', checkUncheckEverything);