jquery 操作checkbox小總結

 

1.全選操作

點擊全選，獲取table里數量在勾選數量里顯示

(1)html代碼

 <table class="table table-bordered table-striped table-condensed flip-content" id="dvData">
                                        <thead>
                                            <tr class="odd gradeX">
                                                <th colspan="4">@(this.ViewBag.sku)</th>
                                                <th colspan="1">合計</th>
                                                <th id="total">@this.ViewBag.total</th>
                                                <th>勾選數量：<span id="ignorenum"></span></th>
                                            </tr>
                                            <tr>
                                                <th><input type="checkbox" id="checkall" /></th>
                                                <th>
                                                    訂單號
                                                </th>
                                                <th>
                                                    銷售渠道
                                                </th>
                                                <th>
                                                    下單時間
                                                </th>
                                                <th>
                                                    狀態
                                                </th>
                                                <th>
                                                    數量
                                                </th>
                                                <th>延遲推送</th>
                                            </tr>
                                        </thead>
                                        <tbody id="check">
                                            @if (Model != null)
                                            {
                                                foreach (var m in Model)
                                                {
                                                    <tr class="odd gradeX">
                                                        @if (m.order_state == 20)
                                                        {
                                                            <td><input type="checkbox"  value="@m.order_sn" /></td>
                                                        }
                                                        else
                                                        {
                                                            <td></td>
                                                        }
                                                        <td align="left">
                                                            @m.order_sn
                                                        </td>
                                                        <td align="left">
                                                            @m.channel_name
                                                        </td>
                                                        <td>
                                                            @m.order_add_time
                                                        </td>
                                                        <td>
                                                            @Enum.Parse(typeof(EnumOrderState), m.order_state.ToString())
                                                        </td>
                                                        <td id="order_goods_num">
                                                            @m.order_goods_num
                                                        </td>
                                                        @if (m.ignore_sn == null)
                                                        {
                                                            <td>否</td>
                                                        }
                                                        else
                                                        {
                                                            <td style="color:red">是</td>
                                                        }

                                                    </tr>
                                                }
                                            }

(2)jq代碼，這是點擊checkbox獲取td里文本值

 //全選
        $("input[id=checkall]").click(function () {
            if (this.checked) {
                $("#check :checkbox").prop("checked", true);  
                        ignorenum = 0;
                        var Check = $("#check input[type=checkbox]:checked");//在table中找input下類型為checkbox屬性為選中狀態的數據
                        Check.each(function () {//遍歷
                            var row = $(this).parent("td").parent("tr");//獲取選中行
                            var num = row.find("[id='order_goods_num']").html();//獲取name='Sid'的值
                            ignorenum = ignorenum + parseInt(num);
                        })
                        $("#ignorenum").html(ignorenum);
            } else {
                $("#check :checkbox").prop("checked", false);
                $("#ignorenum").html(0);
            }
        });



        //關閉模態框
        $('#identifier').on('hide.bs.modal', function () {
            $("#check :checkbox").prop("checked", false);
        })
    });


    //單擊checkbox
    $("#dvData td input[type=checkbox]").each(function () {
        var currentEle = $(this);
        currentEle.click(function () {
            ignorenum = 0;
            var Check = $("#check input[type=checkbox]:checked");//在table中找input下類型為checkbox屬性為選中狀態的數據
            Check.each(function () {//遍歷
                var row = $(this).parent("td").parent("tr");//獲取選中行
                var num = row.find("[id='order_goods_num']").html();//獲取name='Sid'的值
                ignorenum = ignorenum + parseInt(num);
            })
            $("#ignorenum").html(ignorenum);

        });
    });

(3)jq代碼，獲取已選中的checkbox的綁定值，用於向后台傳值

 var arr = new Array();
        $("#check td input[type=checkbox]:checked").each(function (i) {
            arr[i] = $(this).val();
        });
        if (arr.length == 0) {
            alert("請先選擇要取消的訂單");
            return false;
        }
        var vals = arr.join(",");

 (4)另外注意，如果是模態框的話，在關閉時需要將checkbox狀態設為未選中，否則頁面未刷新的話會出現bug

 //關閉模態框
        $('#identifier').on('hide.bs.modal', function () {
            $("#check :checkbox").prop("checked", false);
        })