[英]Javascript function to select/deselect check all check box in radgrid header template
當我在rad網格的模板列中選中項目模板中的復選框時,請有人為我提供Java腳本功能以選擇/取消選中標頭模板中的所有復選框。
當我單擊所有復選框時,使用以下代碼選擇/取消選擇網格行中的所有復選框,效果很好。
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;
}
}
提前致謝。
請嘗試: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>
有關更多詳細信息,請檢查使用JAVASCRIPT的ASP.NET GRIDVIEW控件中的實現檢查所有復選框的功能
jQuery的:
function selectAll()
{
if($("#ck_All")[0].checked)
{
$(":checkbox").attr("checked",true);
}
else
{
$(":checkbox").attr("checked",false);
}
}
最終我得到了我問題的答案,我認為這可能對某些正在尋找答案的人有所幫助。
<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();
}
}
上面的代碼他提到的是完美的
但是,如果您擁有母版頁,則可以像下面在Check(id)函數中那樣更改此代碼行
var hidden = document.getElementById("<%= HiddenField2.ClientID%>");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.