首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

求教jQuery获取用ajax获取数据生成的checkbox元素,该如何解决

2013-08-16 
求教jQuery获取用ajax获取数据生成的checkbox元素本帖最后由 Amway1141 于 2013-07-16 20:31:43 编辑想实

求教jQuery获取用ajax获取数据生成的checkbox元素
本帖最后由 Amway1141 于 2013-07-16 20:31:43 编辑 想实现个全选的功能,数据是用ajax获取然后添加到的DateTable中的,可是就是获取不到DateTable中的checkbox元素

<%@ Register Src="../Top.ascx" TagName="Top" TagPrefix="uc1" %>
<%@ Register Src="../Bottom.ascx" TagName="Bottom" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>快易行旅行网-车票管理-汽车资讯</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <script type="" language="javascript" src="../My97DatePicker/WdatePicker.js"></script>
    <script type="" language="javascript" src="../../Scripts/Common.js"></script>
    <script type="" language="javascript" src="../../Scripts/jquery-1.10.2.min.js"></script>
    <script type="" language="javascript" src="../../Scripts/MediaPager.js"></script>
    <script type="text/javascript" language="javascript">
        function SelectAll(obj) {
   $("input[type=checkbox][name=checkItem]").attr("checked", $(obj).attr("checked"));
             //测试
             alert($("#datetable").html());
        }

        function CollectCheckItems() {
            var idList = '';
            $('input[name="checkItem"]:checked').each(function () {
                idList += $(this).val() + ',';
            });
            return idList.substr(0, idList.length - 1);
        }

        function ToInsert() {
            //跳转到新增页面


            window.location = "IndustryInforMationEdit.aspx";
         }

        function checkBatchDelete(obj) {
            if (obj == 1) {
                if (!window.confirm("确定要删除您选择的数据项吗?")) {
                    return;
                }
                return ;
            }
            else {
                if (!window.confirm("确定要删除您选择的数据项吗?")) {
                    return;
                }
                var checkedItems = CollectCheckItems();
                if (checkedItems == "") {
                    alert("请选择要删除的数据项!");
                    return;
                }
                $.ajax({
                    type: 'GET',
                    url: 'CarbooksadContentDelAllList.ashx',
                    dataType: 'text',
                    data: { Action: 'delete', idList: checkedItems },
                    cache: false,


                    success: function (r) {
                        if (r == "1") {
                            alert("批量删除成功!");
                            window.location.reload();
                        }
                        else {
                            alert("批量删除失败!");
                        }
                    }
                });
            }
        }
        

        $(function () {
            var strWhere = " IndustryInformation_Type=0 and IndustryInformation_IsDelete=0 ";
            var data = { _strWhere: strWhere, _pageSize: '15', _pageIndex: '1', _oderby: ' CreateDateTime desc',
                _showtable: '#datetable', _showpagediv: '#pagingdiv', _showloaddiv: '#loaddiv', _buildHead: function () {
                    var trhead = $("<tr></tr>");
                    $(trhead).append("<th width='10%'>&nbsp;</th>")
                            .append("<th width="10%">序号</th>")


                            .append("<th width="30%">标题</th>")
                            .append("<th width="20%">来源</th>")
                            .append("<th width="20%">发布日期</th>")
                            .append("<th width="20%">操作</th>");
                    $("#datetable").append($(trhead));
                }
                , _buildTable: function (index, souce) {
                    var trdata = $("<tr></tr>");
                    $(trdata).append("<td><input name='checkItem' value=" + souce.pk_m_id + " type="checkbox"/></td>")
                            .append("<td>" + souce.pk_m_id + "</td>")
                            .append("<td>" + souce.IndustryInformation_Title + "</td>")
                            .append("<td>" + souce.IndustryInformation_Sources + "</td>")
                            .append("<td>" + souce.CreateDateTime + "</td>")
                            .append("<td><a href="IndustryInforMationEdit.aspx?pk_m_id=" + souce.pk_m_id + "">编辑</a>|<a onclick='return checkBatchDelete(1);' href="#">删除</a></td>");


                    $("#datetable").append($(trdata));
                }, _buildLastTr: function (total) {
                    var trcensus = $("<tr></tr>");
                    $("#datetable").append($(trcensus));
                }, _url: '../AjaxHandle/IndustrInfoMationAjax.ashx'
            };

            new customPaging(data);

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <!--头部-->
    <uc1:Top ID="Top1" runat="server" />
    <!--头部 end-->
    <!--内容-->
    <div class="content">
        <div class="nav_title">
            <a href="#">车票管理</a> > 汽车咨询列表</div>
        <div class="bk">
            <!--搜索框-->
            <div class="search_box">
                <ul>
                    <li>标题:<input type="text" class="inptu_w137" value="" /></li>
                    <li>来源:<input type="text" class="inptu_w137" value="" /></li>
                    <li>发布日期:<asp:TextBox ID="Txt_CreateDateTime1" runat="server" class="input65" onclick="WdatePicker()"></asp:TextBox></li>
                    <li>至<asp:TextBox ID="Txt_CreateDateTime2" runat="server" class="input65" onclick="WdatePicker()"></asp:TextBox></li>


                    <li>
                        <input type="button" class="btn_search" /></li>
                </ul>
            </div>
            <!--搜索框 end-->
            <div class="table_box">
                <!--操作-->
                <div class="manipulate pt20 pb10">
                    <span class="pr10">
                        <input type="checkbox" name="checkbox" value="checkbox" onclick="SelectAll(this)" />&nbsp;全选</span> <span class="pr10">
                        <input type="button" onclick='ToInsert()' value="" class="btn_add" /></span> <span class="pr10">
                                <input onclick='return checkBatchDelete();' type="button" value="" class="btn_del" />
                            </span>
                </div>
                <!--操作 end-->
                <table id="datetable" cellpadding="0" cellspacing="0" width="100%" class="table_list">
                </table>
                <!--翻页-->
                <div id="pagingdiv" class="pager mt10 mb10">


                </div>
                <!--翻页 end-->
                <div id="loaddiv" class="loading_img" style="display: none">
                    <img alt="求教jQuery获取用ajax获取数据生成的checkbox元素,该如何解决" src="../images/Loding.gif" width="31" height="31" />
                    <p>
                        数据加载中,请稍后...</p>
                </div>
            </div>
        </div>
    </div>
    <!--内容 end-->
    <!--底部-->
    <uc2:Bottom ID="Bottom1" runat="server" />
    <!--底部 end-->
    </form>
</body>
</html>


我想点击页面上的一个checkbox控件,实现全选和反选功能,不光可以获取元素,也可以获取元素的值
具体代码如下,在上面的代码中也有的
 <input type="checkbox" name="checkbox" value="checkbox" onclick="SelectAll(this)" />&nbsp;全选</span>

这个问题一直在网上找了很久,没找到正确的解决方案,又苦于本人jQuery功底有限,希望路过的大牛们,可以帮忙解决下该问题,小弟将不胜感激,先谢谢了啊 jQuery Ajax CheckBox
[解决办法]
代码没什么大的问题啊!本地测试了下,如果单单写静态的checkbox,可以全选,和取值。是不是你的异步数据加载的时候出问题了。
[解决办法]
你把那个SELECT的方法放到页面底下去调用试试看

热点排行