用于选择/取消选择 radgrid 标题模板中的所有复选框的 Javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20065344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript function to select/deselect check all check box in radgrid header template
提问by Gurunadh
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.
提前致谢。
采纳答案by Gurunadh
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();
}
}
回答by TechDo
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 控件中的 IMPLEMENT CHECK ALL CHECKBOX FUNCTIONALITY
回答by coin
jQuery:
jQuery：
function selectAll()
{
if($("#ck_All")[0].checked)
{
$(":checkbox").attr("checked",true);
}
else
{
$(":checkbox").attr("checked",false);
}
}
回答by charitha reddy
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%>");
