C# 使用javascript查找放置在gridview中的复选框和文本框

我想获取放置在栅格视图中的复选框的值。如果选中复选框，则该行中的文本框应处于启用状态，如果再次取消选中，则文本框应清除并禁用。几个小时前我问了这个问题，但仍然没有得到满意的答案。 我试过了

//我的网格代码

<asp:GridView ID="DeptGrid" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="DeptId" HeaderText="ID"/>
                    <asp:BoundField DataField="DeptName" HeaderText="Department"/>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox ID="addToCompanyBox"  onClick="EnableHODBox()" runat="server" />
                        </ItemTemplate>
                        <HeaderTemplate>
                            Add
                        </HeaderTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:TextBox ID="hodNameBox" runat="server" Width="200px" Enabled="false"></asp:TextBox>
                        </ItemTemplate>
                        <HeaderTemplate>
                            Dept Head
                        </HeaderTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

添加
部门主管

//我的javascript代码

<script type="text/javascript">
 function EnableHODBox() {
     //alert('hello');
     var GridView = document.getElementById('<%=DeptGrid.ClientID %>');
     //var GridView = document.getElementById('');
     var DeptId;
     if (GridView.rows.length > 0) {
         for (Row = 1; Row < GridView.rows.length; Row++) {
            // DeptId = GridView.rows.cell[0];
             if (GridView.rows[Row].cell[3].type == "checkbox")
             // var chkbox = GridView.rows[Row].cell[3].type == "checkbox"
                 (GridView.rows[Row].cell[3].type).checked = true;
         }
     }
 }
 </script>

函数EnableHODBox（）{
//警惕（“你好”）；
var GridView=document.getElementById（“”）；
//var GridView=document.getElementById（“”）；
var DeptId；
如果（GridView.rows.length>0）{
对于（行=1；行

您可以使用

onclick

JavaScript而不是

OncheckedChanged

事件，该事件是一个复选框服务器端事件

<asp:CheckBox ID="CheckBox2" runat="server" onclick="Javascript:JSfunctionName();" />

---

我还发现语句if（GridView.rows[Row].cell[2].type==“checkbox”）导致错误GridView.rows[Row].cell[2].type未定义。我现在运行的代码如下：

    var grid = document.getElementById('<%=grdResults.ClientID%>');
    if (grid.rows.length > 0) {
        for (row = 1; row < grid.rows.length; row++) {
            if (grid.rows[row].cells[0].childNodes[0].checked) {
                // do something here
                alert('function for row ' + row);
            }                                  
        }

var grid=document.getElementById（“”）；
如果（grid.rows.length>0）{
对于（行=1；行

您可以这样定义网格：

 <div>
   <asp:GridView ID="GridView1" runat="server"  Width = "550px"
    AutoGenerateColumns = "false" Font-Names = "Calibri" 
    Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true"  ShowFooter = "true"  OnPageIndexChanging = "OnPaging" PageSize = "10" >
   <Columns>
      <asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
        <ItemTemplate>
         <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' 
             onblur="SetPostingPeriod(this)"></asp:TextBox>
        </ItemTemplate>                       
    </asp:TemplateField>   
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 
</div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="64px"
    Width="389px" EnableViewState="False">
    <Columns>
        <asp:TemplateField HeaderText="EmployeeId">
            <ItemTemplate>
                <asp:Label ID="lblEmployeeId" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="FirstName">
            <ItemTemplate>
                <asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="LastName">
            <ItemTemplate>
                <asp:Label ID="lblLastName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <HeaderStyle BackColor="#FF66FF" ForeColor="#660033" />
</asp:GridView>

然后，对于网格中可用的每个“txtPeriod”控件，我们需要指定 将当前“txtPeriod”文本框的值传递给它们

循环网格以识别每个可用的“txtPeriod”： 代码如下：

      var cntNbr = $("#" + obj.id).val();

 $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {

 });

               if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }

---

嗨，这里有一个非常简单的解决方案

假设您的网格如下所示：

 <div>
   <asp:GridView ID="GridView1" runat="server"  Width = "550px"
    AutoGenerateColumns = "false" Font-Names = "Calibri" 
    Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true"  ShowFooter = "true"  OnPageIndexChanging = "OnPaging" PageSize = "10" >
   <Columns>
      <asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
        <ItemTemplate>
         <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' 
             onblur="SetPostingPeriod(this)"></asp:TextBox>
        </ItemTemplate>                       
    </asp:TemplateField>   
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 
</div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="64px"
    Width="389px" EnableViewState="False">
    <Columns>
        <asp:TemplateField HeaderText="EmployeeId">
            <ItemTemplate>
                <asp:Label ID="lblEmployeeId" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="FirstName">
            <ItemTemplate>
                <asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="LastName">
            <ItemTemplate>
                <asp:Label ID="lblLastName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <HeaderStyle BackColor="#FF66FF" ForeColor="#660033" />
</asp:GridView>

在网格中查找控件的javascript是

   <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#btnAddToGrid").click(function () {
                var $grid = $('#<%=GridView1.ClientID %>');
                var $row = $grid.find('tr:last').clone().appendTo($grid);
                var employeeId = $row.find("span[id*='lblEmployeeId']").text();
                var firstname =  $row.find("span[id*='lblFirstName']").text();
                var lastname = $row.find("span[id*='lblLastName']").text();
              alert("ID :" + employeeId +"\n" + "Name :" + firstname +" "+ lastname );
            });
        });
    </script>

$（文档）.ready（函数（）{
$（“#btnAddToGrid”）。单击（函数（）{
var$grid=$（“#”）；
var$row=$grid.find（'tr:last'）.clone（）.appendTo（$grid）；
var employeeId=$row.find（“span[id*='lblEmployeeId']”）text（）；
var firstname=$row.find（“span[id*='lblFirstName']”）text（）；
var lastname=$row.find（“span[id*='lblLastName']”）。text（）；
警报（“ID:+employeeId+”\n“+”名称：“+firstname+”+lastname”）；
});
});

使用java脚本查找网格内的控件：

for (var r = 1; r < grid.rows.length; ++r) {

    var indexValue = 0; //based on browser. //IE8
    var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
    if (typeof (txtPeriod.value) == "undefined")//IE9                      
        indexValue = 1
     var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
     alert(txtPeriod.value);
}

for（var r=1；r
var x=document.getElementById（“”）.querySelectorAll（“输入”）；
var i；
var-cnt=0；
对于（i=0；i
此解决方案经过测试，仅使用
JavaScript
（此解决方案不需要
jQuery
）

1.C#部分（在
页面加载中
方法）
在
Page\u Load
中，我们需要添加一个小技巧：

foreach(GridViewRow row in YourGridViewControlID.Rows)
{
    if (row.RowType == DataControlRowType.DataRow )
    {
      ((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");");
    }
}

这样，我们在
GridView
的每个
复选框的
OnChange
事件上添加了JavaScript函数调用。特别的是，我们无法通过
HTML
实现的是，我们在JavaScript函数中传递每个
行索引，这是我们以后需要的

2.HTML部分的一些重要注释
确保
复选框
控件和
文本框
控件，但更重要的是
GridView
控件都具有静态id，方法是使用
clientMode=“static”
，如下所示：

<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />

3.Javascript部分
然后在JavaScript文件/代码中：

function TextboxAutoEnableAndDisable(Row) {
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];

  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked === false) {
    // Empty textbox and make it disabled
    rowTextBox.value = "";
    rowTextBox.disabled = true;
    return;
  }

  // To be here means the row checkbox is checked, therefore make it enabled.
  rowTextBox.disabled = false;
}

4.上述实施的一些注意事项

请注意，在JavaScript代码中，在以下行：

var currentGridViewRow=GridView.rows[Row+1]；


[Row+1]
对于执行此操作非常重要，不应更改
最后：

以下几行：

var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

.cells[2]
和
.cells[0]
可能与您不同，因此您必须在
[]
中选择正确的数字

通常，这将是从
0
开始计数的
GridView
的列号

因此，如果您的
复选框
位于GridView的第一列，则需要
.cells[0]


如果您的
TextBox
位于
GridView
的第二列，那么您需要
.cells[1]
（在我上面的例子中，
TextBox
位于我的
GridView
的第三列，因此，我使用了
.cells[2]
）<
<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">

function TextboxAutoEnableAndDisable(Row) {
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];

  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked === false) {
    // Empty textbox and make it disabled
    rowTextBox.value = "";
    rowTextBox.disabled = true;
    return;
  }

  // To be here means the row checkbox is checked, therefore make it enabled.
  rowTextBox.disabled = false;
}

var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];