Question

请给我一个java脚本函数来选择/取消选中勾选标题模板中的所有复选框，当我选中rad grid的模板列中的项目模板中的复选框时。

我使用以下代码选中/取消选中网格行中的所有复选框，当我点击勾选所有复选框时，工作正常。

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;
    }
}

提前致谢。

Answer 1

请尝试： 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>

有关详细信息，请查看IMPLEMENT CHECK ALL CHECKBOX FUNCTIONALITY IN ASP.NET GRIDVIEW CONTROL USING JAVASCRIPT

Answer 2

jQuery的：

function selectAll()
{
    if($("#ck_All")[0].checked)
    {
        $(":checkbox").attr("checked",true);
    }
    else
    {
        $(":checkbox").attr("checked",false);
    }
}

Answer 3

最后我得到了我的问题的答案，我认为这可能对寻找答案的人有所帮助。

<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();
    }
}

Answer 4

上面的代码他提到的是完美的

但是如果你有母版页，那么在函数Check（id）

里面改变这行代码

var hidden = document.getElementById("<%= HiddenField2.ClientID%>");

Javascript函数选择/取消选中radgrid标题模板中的所有复选框

4 个答案: