按钮单击我使用jquery ajax使用下面的代码填充了我的网格视图。
$(document).ready(function () {
$("#btnShowData").click(function () {
$('#gvData').empty();
load_data(0, 30);
});
});
function load_data(iPageIndex, iPageSize) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "GridAjaxDotnetSpan.aspx/BindEmployees",
data: JSON.stringify({ iPageIndex: iPageIndex, iPageSize: iPageSize }),
dataType: "json",
success: function (result) {
$('#gvData').empty();
$('#gvData').append("<tr><th><input type='checkbox' id='chkOrgheader' name='chkOrgheader' onclick='selectAll();' /></th><th>EmpId </th><th>EmpName </th><th>empsal </th><th>empaddr </th></tr>")
for (var i = 0; i < result.d.length; i++) {
$("#gvData").append("<tr><td><input type='checkbox' id='chkOrgRow' name='chkOrgRow' /></td><td>" + result.d[i].EmpId + "</td><td>" + result.d[i].EmpName + "</td><td>" + result.d[i].empsal + "</td><td>" + result.d[i].empaddr + "</td></tr>");
}
hideorshownavigation();
},
error: function (result) {
alert("Error");
}
});
}
并选择标题复选框我想选择所有子复选框。我使用了下面的代码。
function selectAll() {
var bool = $("#gvDatainput[id*='chkOrgheader']:checkbox").is(':checked');
//var isChecked = $(checked).attr('checked') ? true : false; //tired this on also by passing "this" to chkOrgheader onclick="selectAll(this)"
if (bool) {
$('input:checkbox[name$=chkOrgRow]').each(
function () {
$(this).attr('checked', 'checked');
});
}
else {
$('input:checkbox[name$=chkOrgRow]').each(
function () {
$(this).removeAttr('checked');
});
}
}//End of select all
当我选择标题复选框时,上面的selectAll函数被触发&#34; chkOrgheader&#34;但我总是被检查为假。
我正朝着正确的方向前进?请建议我如何达到这个要求。
我需要以下几点的帮助: 1.当我选中标题复选框时,所有子复选框都应选择
答案 0 :(得分:2)
第1点 - 由于checkbox
不正确,您的以下代码未选择任何selector
。您需要在身份#gvData
和input
之间留出空格,而*
+不需要id
+,无需使用:checkbox
进行过滤您选择的id
复选框是唯一的。所以只需修改您的代码如下:
var bool = $("#gvData input[id='chkOrgheader']").is(':checked');
您可能会遇到.attr
的某些问题,因此建议您使用.prop
代替
DEMO WITH .prop
//Works fine
$(this).prop('checked', true); //check the checkbox
$(this).attr('checked',false);//uncheck the checkbox
DEMO WITH .attr
//checks and unchecks for the first time and then unfunctional
第2点
由于您要动态添加checkboxes
,因此您可以使用jquery
eventlistener来执行获取值的操作
$(document).on('change','td input[type="checkbox"]',function(){
if($(this).prop('checked'))
alert($(this).parent('td').siblings('td:nth-child(4)').text()); //You can either store it in variable as per your needs
^^^^^^^Retrieves values of Column 4 which is salary
});
<强> DEMO HERE 强>