Question

脚本： -

listremove

HTML： -

 <script type="text/javascript">
        $(document).ready(function () {
            $("#cbSelectAll").click(function () {
                if (this.checked) {
                    $(':checkbox').each(function () {
                        this.checked = true;
                        var selectall = document.getElementsByClassName(".checkBoxClass");
                        var cid = $(this).attr('id');
                        console.log('cid' + cid);
                        var hidSelectAll = document.getElementById("hfSelectAll");
                        var hidCustomer = document.getElementById("hfCustomerID");
                        hidCustomer = '';
                        var str = 'Select All';
                        hidSelectAll.value = str;
                        console.log(hidSelectAll);
                    });
                    $("#GridRows .checkBoxClass").change(function () {
                        if (!$(this).prop("checked")) {
                            $("#cbSelectAll").prop("checked", false);
                            var cid = $(this).attr('id');
                            console.log('cid' + cid);
                            var hidSelectAll = document.getElementById("hfSelectAll");
                            var str = 'Select All + unselected values';
                            hidSelectAll.value = str;
                            console.log(hidSelectAll);
                        }
                    });   
                }
                else {
                    $(':checkbox').each(function () {
                        this.checked = false;
                        var hidSelectAll = document.getElementById("hfSelectAll");
                        var str = 'UnSelect All';
                        hidSelectAll.value = str;
                        console.log(hidSelectAll);
                    });
                    $(".checkBoxClass").change(function () {
                        if (!$(this).prop("checked")) {
                            $("#cbSelectAll").prop("checked", false);
                            var hidSelectAll = document.getElementById("hfSelectAll");
                            var str = 'unSelect All + selected values';
                            hidSelectAll.value = str;
                            console.log(hidSelectAll);
                        }
                    });
                }
            });
        });
    </script>

这是html。从jquery ajax调用动态生成的行，以避免在页面加载时丢失存储在隐藏字段中的值。

在此单击时选中所有复选框，表格的所有值   从同一页面中选择。

如何在单击时存储多个分页的表的所有值   选择全部复选框？

什么是存储表的所有值的选项？

Answer 1

实际上你的checkAll（..）悬挂着没有任何附件。

1）添加onchange事件处理程序

2）修改代码以处理检查/取消选中

function addRow(tableID) {

     var table = document.getElementById(tableID);

     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);

     var cell1 = row.insertCell(0);
     var element1 = document.createElement("input");
     element1.type = "checkbox";
     element1.name = "chkbox[]";
     cell1.appendChild(element1);

     var cell2 = row.insertCell(1);
     cell2.innerHTML = rowCount;

     var cell3 = row.insertCell(2);
     cell3.innerHTML = rowCount;

     var cell4 = row.insertCell(3);
     cell4.innerHTML = rowCount;

     var cell5 = row.insertCell(4);
     cell5.innerHTML = rowCount;

     var cell6 = row.insertCell(5);
     cell6.innerHTML = rowCount;
 }

 function deleteRow(tableID) {
     try {
         var table = document.getElementById(tableID);
         var rowCount = table.rows.length;

         for (var i = 1; i < rowCount; i++) {
             var row = table.rows[i];
             var chkbox = row.cells[0].childNodes[0];
             if (null != chkbox && true == chkbox.checked) {
                 table.deleteRow(i);
                 rowCount--;
                 i--;
             }
         }
     } catch (e) {
         alert(e);
     }
 }

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" border="1">
    <tr>
        <th>
            <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" />
        </th>
        <th>Make</th>
        <th>Model</th>
        <th>Description</th>
        <th>Start Year</th>
        <th>End Year</th>
    </tr>
</TABLE>

Answer 2

如果您使用数据表，则可以。

$(document).ready(function () { 
var oTable = $('#example').dataTable({
    stateSave: true
});

var allPages = oTable.fnGetNodes();

$('body').on('click', '#selectAll', function () {
    if ($(this).hasClass('allChecked')) {
        $('input[type="checkbox"]', allPages).prop('checked', false);
    } else {
        $('input[type="checkbox"]', allPages).prop('checked', true);
    }
    $(this).toggleClass('allChecked');
})
});

还有一个选项，即您必须在所有复选框上添加相同的类名并添加此代码。（如果您不使用数据表）。

var select_all = document.getElementById("select_all");
var checkboxes = document.getElementsByClassName("checkbox"); 
select_all.addEventListener("change", function(e){
    for (i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = select_all.checked;
 }
});

for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(e){ //".checkbox" change
//uncheck "select all", if one of the listed checkbox item isunchecked
    if(this.checked == false){
        select_all.checked = false;
    }
if(document.querySelectorAll('.checkbox:checked').length ==checkboxes.length){
        select_all.checked = true;
    }
});
}

如何使用javascript从表中选择所有复选框

2 个答案: