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

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

1 个答案: