[英]Javascript function to select/deselect check all check box in radgrid header template
Please some one provide me the java script function to select/deselect check all check box which is in the header template, when i checked a check box in item template in template column of rad grid. 当我在rad网格的模板列中选中项目模板中的复选框时,请有人为我提供Java脚本功能以选择/取消选中标头模板中的所有复选框。
i am using the following code to select/deselect all check boxes in the grid rows when i click on check all check box, which is working fine. 当我单击所有复选框时,使用以下代码选择/取消选择网格行中的所有复选框,效果很好。
protected void ToggleSelectedState(object sender, EventArgs e)
{
CheckBox headerCheckBox = (sender as CheckBox);
foreach (GridDataItem dataItem in RadWages.MasterTableView.Items)
{
(dataItem.FindControl("chkTax") as CheckBox).Checked = headerCheckBox.Checked;
dataItem.Selected = headerCheckBox.Checked;
}
}
Thanks in advance. 提前致谢。
Please try: HTML 请尝试:HTML
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick = "Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
Highlight Row when checkbox is checked 选中复选框时突出显示行
<script type = "text/javascript">
function Check_Click(objRef)
{
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if(objRef.checked)
{
//If checked change color to Aqua
row.style.backgroundColor = "aqua";
}
else
{
//If not checked change back to original color
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else
{
row.style.backgroundColor = "white";
}
}
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i=0;i<inputList.length;i++)
{
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if(inputList[i].type == "checkbox" && inputList[i] != headerCheckBox)
{
if(!inputList[i].checked)
{
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
</script>
Check all checkboxes functionality 选中所有复选框功能
<script type = "text/javascript">
function checkAll(objRef)
{
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i=0;i<inputList.length;i++)
{
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if(inputList[i].type == "checkbox" && objRef != inputList[i])
{
if (objRef.checked)
{
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
row.style.backgroundColor = "aqua";
inputList[i].checked=true;
}
else
{
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to original
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else
{
row.style.backgroundColor = "white";
}
inputList[i].checked=false;
}
}
}
}
</script>
For more details, please check IMPLEMENT CHECK ALL CHECKBOX FUNCTIONALITY IN ASP.NET GRIDVIEW CONTROL USING JAVASCRIPT 有关更多详细信息,请检查使用JAVASCRIPT的ASP.NET GRIDVIEW控件中的实现检查所有复选框的功能
jQuery: jQuery的:
function selectAll()
{
if($("#ck_All")[0].checked)
{
$(":checkbox").attr("checked",true);
}
else
{
$(":checkbox").attr("checked",false);
}
}
Finally i got the answer for my question and i think it may helpful for some one who is searching for answer. 最终我得到了我问题的答案,我认为这可能对某些正在寻找答案的人有所帮助。
<telerik:GridTemplateColumn UniqueName="CheckTemp" HeaderStyle-Width="40"
HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="30"
ItemStyle-HorizontalAlign="Left" HeaderStyle-ForeColor="Black"
AllowFiltering="false">
<HeaderTemplate>
<asp:CheckBox ID="chkall" runat="server" onclick="CheckAll(this);" AutoPostBack="false" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkTax" runat="server" onclick="Check(this);"AutoPostBack="false" />
</ItemTemplate>
</telerik:GridTemplateColumn>
and place one hidden field like this 并放置一个这样的隐藏场
<asp:HiddenField ID="HiddenField1" runat="server" />
and the respected java scripts is 并且受人尊敬的Java脚本是
click of header row check box. 单击标题行复选框。
<script type="text/javascript">
function CheckAll(id) {
var masterTable = $find("<%= RadWages.ClientID %>").get_masterTableView();
var row = masterTable.get_dataItems();
if (id.checked == true) {
for (var i = 0; i < row.length; i++) {
masterTable.get_dataItems()[i].findElement("chkTax").checked = true;
}
}
else {
for (var i = 0; i < row.length; i++) {
masterTable.get_dataItems()[i].findElement("chkTax").checked = false;
}
}
}
</script>
click of grid row check box. 单击网格行复选框。
<script type="text/javascript">
function Check(id) {
var masterTable = $find("<%= RadWages.ClientID %>").get_masterTableView();
var row = masterTable.get_dataItems();
var hidden = document.getElementById("HiddenField1");
if (id.checked == false) {
var checkBox = document.getElementById(hidden.value);
checkBox.checked = false;
}
else {
var checkBox = document.getElementById(hidden.value);
checkBox.checked = true;
for (var i = 0; i < row.length; i++) {
if (masterTable.get_dataItems()[i].findElement("chkTax").checked == false) {
var checkBox = document.getElementById(hidden.value);
checkBox.checked = false;
}
}
}
}
</script>
and add the bellow code in item created event 并在项目创建事件中添加以下代码
protected void RadWages_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridHeaderItem)
{
GridHeaderItem hItem = (GridHeaderItem)e.Item;
CheckBox chk1 = (CheckBox)hItem.FindControl("chkall");
HiddenField1.Value = chk1.ClientID.ToString();
}
}
the above code what he mentioned is perfect 上面的代码他提到的是完美的
But if you are having master page , then change this line of code like below inside function Check(id) 但是,如果您拥有母版页,则可以像下面在Check(id)函数中那样更改此代码行
var hidden = document.getElementById("<%= HiddenField2.ClientID%>");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.