如何在javascript中選中所有復選框？

Question

腳本：-

<script type="text/javascript">
        $(document).ready(function () {
            var x = document.getElementById("currentPage").value;
            if (x == null || x == "")
                GetPage(parseInt(1));
            else
                GetPage(parseInt(x));

            $('#pager').on('click', 'input', function () {
                GetPage(parseInt(this.id));
                document.getElementById("currentPage").value = parseInt(this.id);
            });
        });


        function GetPage(pageIndex) {
            //debugger;
            $.ajax({
                cache: false,
                //url: "/EmailScheduler/",
                url: '@(Url.RouteUrl("EmailScheduler"))',
                type: "POST",
                data: { "selectValue": pageIndex },
                traditional: true,
                dataType: "json",
                success: function (data) {
                    //debugger;
                    $('#GridRows').empty();
                    $('#pager').empty();
                    var trHTML = '';
                    var htmlPager = '';

                    $.each(data.Customers, function (i, item) {

                        trHTML += ' <tbody class="table-hover"><tr>'
                        + '<td class="text-left"><div class="checkbox" style="padding-left:50px;"><label><input type="checkbox" id=" ' + item.CustomerID + '" class="checkBoxClass"/></label></div></td>'
                        + '<td class="text-left" id="tblFirstName"> ' + item.FirstName + '</td>'
                        + '<td class="text-left" id="tblLastName"> ' + item.LastName + '</td>'
                        + '<td class="text-left" id="tblEmailID"> ' + item.EmailID + '</td>'
                        + '<td class="text-left" id="tblCustomerType"> ' + item.CustomerType + '</td>'
                        + '<td class="text-left" id="tblCustomerDesignation" style="padding-left:40px;padding-right:30px;"> ' + item.CustomerDesignation + '</td></tr></tbody>'
                    });

                    $('#GridRows').append(trHTML);

                    if (data.Pager.EndPage > 1) {
                        htmlPager += '<ul class="pagination">'
                        if (data.Pager.CurrentPage > 1) {
                            htmlPager += '<li><input class="myButton" style="width:25px;height:25px;" type="button" id="1" style="font-weight:bold;" value="<<" /></li><li><input type="button"  class="myButton" id="' + (data.Pager.CurrentPage - 1) + '"value="<"></li>'
                        }

                        for (var page = data.Pager.StartPage; page <= data.Pager.EndPage; page++) {
                            htmlPager += '<li class="' + (page == data.Pager.CurrentPage ? "active" : "") + '"><input type="button"  class="myButton" id="' + page + '" value="' + page + '"/></li>'
                        }

                        if (data.Pager.CurrentPage < data.Pager.TotalPages) {
                            htmlPager += '<li><input type="button"  class="myButton" id="' + (data.Pager.CurrentPage + 1) + '" value=">"/></li><li><input type="button" class="myButton" id="' + (data.Pager.TotalPages) + '"  value=">>"/></li>'
                        }

                        htmlPager += '</ul>'
                    }
                    $('#pager').append(htmlPager);

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    debugger;
                }

            });
        }

        $(document).on('click', '#GridRows .checkBoxClass',
            function () {
                var cid = $(this).attr('id');
                debugger;
                var CustomerIDArray = [];
                var hidCID = document.getElementById("hfCustomerID");
                if (hidCID != null && hidCID != 'undefined') {
                    var CustID = hidCID.value;
                    CustomerIDArray = CustID.split("|");
                    var currentCheckboxValue = cid;
                    var index = CustomerIDArray.indexOf(currentCheckboxValue);
                    //debugger;
                    if (index >= 0) {
                        var a = CustomerIDArray.splice(index, 1);
                        //alert("a" + a);
                    }
                    else {
                        CustomerIDArray.push(currentCheckboxValue);
                        //alert('pushed value:' + CustomerIDArray);
                    }
                    hidCID.value = CustomerIDArray.join("|");
                    //alert('Final' + hidCID.value);
                }
                else {
                    alert('undefined');
                }

            });

        $(document).on('click', '#cbSelectAll', function () {
            if (this.checked) {
                //$(':checkbox').each(function () {
                $("#GridRows .checkBoxClass").each(function () {
                    //debugger;
                    this.checked = true;
                    var selectall = document.getElementsByClassName(".checkBoxClass");
                    var custid = $(this).attr('id');
                    console.log('custid' + custid);
                    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：-

  <div class="table-responsive" style="padding-left:20%;">
            <table id="tCustomer" class="table-fill" style="float:left;">
                <thead>
                    <tr>
                        <th class="text-left">                            
                             Select All
                            <div class="checkbox">
                                <input style="margin-left:15px;" type="checkbox" id="cbSelectAll" class="checkBoxClass"/>
                            </div>
                        </th>
                        <th class="text-left" style="padding-left:27px;">
                            First Name
                        </th>
                        <th class="text-left" style="padding-left:32px;">
                            Last Name
                        </th>
                        <th class="text-left" style="padding-left:40px;padding-right: 60px;">
                            Email-ID
                        </th>
                        <th class="text-left" style="padding-left:30px;padding-right: 40px;">
                            Customer Type
                        </th>
                        <th class="text-left" style="padding-left:15px;">
                            Customer Designation
                        </th>
                    </tr>
                </thead>
            </table>
            <div id="GridRows" style="width:65%;">
            </div>
        </div>

        <div id="pager"></div>
        <input type="hidden" id="currentPage">
        <input type="hidden" id="hfCustomerID"/>
        <input type="hidden" id="hfSelectAll" />

在這種情況下，當單擊“全選”復選框時，應檢查來自的所有值，但如果選中“全選”，則將僅選擇當前分頁的值。 表包含是從ajax生成的，以避免在頁面加載時丟失檢查值。

Answer 1

就你而言

$(".checkBoxClass").prop('checked', true);

應該也可以。

.prop（）方法僅獲取匹配集中第一個元素的屬性值。 對於尚未設置的屬性值，或者如果匹配的集合沒有元素，則返回undefined 。

閱讀更多： 這里

Answer 2

在jquery中，您可以通過以下方法實現此目的：

$('input[type="checkbox"]').prop('checked', true);

它將選中所有復選框。