Javascript函数用于选择/取消选中radgrid标头模板中的所有复选框
Javascript function to select/deselect check all check box in radgrid header template
当我在rad网格的模板列中的项目模板中选中复选框时,请有人给我提供java脚本函数来选择/取消选中标题模板中的所有复选框。
当我点击checkall复选框时,我使用以下代码来选择/取消选择网格行中的所有复选框,这很好。
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;
}
}
提前谢谢。
最后我得到了问题的答案,我认为这可能对正在寻找答案的人有所帮助。
<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>
并放置一个类似的隐藏字段
<asp:HiddenField ID="HiddenField1" runat="server" />
受人尊敬的java脚本是
单击标题行复选框。
<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>
单击网格行复选框。
<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>
并在项目创建事件中添加以下代码
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();
}
}
请尝试: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>
选中复选框时高亮显示行
<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>
检查所有复选框功能
<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>
有关更多详细信息,请选中Implementment check ALL CHECKBOX FUNCTIONALITY IN ASP.NET GRIDVIEW CONTROL USING JAVASCRIPT
jQuery:
function selectAll()
{
if($("#ck_All")[0].checked)
{
$(":checkbox").attr("checked",true);
}
else
{
$(":checkbox").attr("checked",false);
}
}
他提到的上述代码是完美的
但如果你有母版页,那么在函数Check(id)内更改这行代码,如下所示
var hidden = document.getElementById("<%= HiddenField2.ClientID%>");
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- 使用jquery选中/取消选中单个复选框
- Angular JS Filter-通过3个复选框进行筛选
- 如果选中了多个复选框,如何添加事件
- Javascript复选框函数:;缺少:在属性id之后"
- JavaScript-切换“;全部检查”;复选框true/false
- 如何从javascript/jquery中的复选框中获取布尔值
- 在 Telerik RadGrid 中单击复选框时打开对话框窗口
- Javascript函数用于选择/取消选中radgrid标头模板中的所有复选框
- 选中Telerik Radgrid Header复选框
- 如何在RadGrid中使用JavaScript验证复选框时验证文本框