求教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" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/Scripts/Common.js"></script>
<script type="" language="javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/Scripts/jquery-1.10.2.min.js"></script>
<script type="" language="javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/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%'> </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)" /> 全选</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)" /> 全选</span>
这个问题一直在网上找了很久，没找到正确的解决方案，又苦于本人jQuery功底有限，希望路过的大牛们，可以帮忙解决下该问题，小弟将不胜感激，先谢谢了啊 jQuery Ajax CheckBox
[解决办法]
代码没什么大的问题啊！本地测试了下，如果单单写静态的checkbox，可以全选，和取值。是不是你的异步数据加载的时候出问题了。
[解决办法]
你把那个SELECT的方法放到页面底下去调用试试看