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