如何选择javascript中的所有复选框?

时间:2017-05-12 10:25:44

标签: javascript jquery checkbox

  

脚本: -

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

在此单击Select all复选框时,则应显示所有值   检查但是当选中所有选中复选框时,则仅选中值   从目前的分页中被选中。   table contains是从ajax生成的,以避免丢失检查值   页面加载时。

2 个答案:

答案 0 :(得分:1)

在你的情况下

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

也应该有用。

  

.prop()方法仅获取匹配集中第一个元素的属性值。它返回undefined表示尚未设置的属性的值,或者匹配的集合没有元素。

阅读更多:Here

答案 1 :(得分:0)

在jquery中,您可以通过以下方式实现此目的:

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

将选中所有复选框。