使用javascript查找置于gridview内的复选框和文本框
我希望将复选框的值放在网格视图中。 如果选中复选框，则应启用该行中的文本框，如果再次取消选中该文本框，则文本框应清除并禁用。 几个小时前我问过这个问题，但仍然没有得到满意的答复。 我试过这样的。
//我的网格代码
Add Dept Head //我的javascript代码
function EnableHODBox() { //alert('hello'); var GridView = document.getElementById(''); //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; } } }
您可以使用onclick JavaScript而不是OncheckedChanged事件，这是一个CheckBox服务器端事件。
编辑：
var GridView = document.getElementById('<%=DeptGrid.ClientID %>')
编辑：根据您的评论请求
if (GridView.rows[Row].cell[2].type == "checkbox") { if (GridView.rows[Row].cell[2].childNodes[0].checked) { GridView.rows[Row].cell[3].childNodes[0].disabled=false;// Enable your control here } }
此解决方案经过测试 ，仅使用JavaScript （此解决方案不需要jQuery ！）。
1. C＃部分（在Page_Load方法中）
在Page_Load我们需要添加一个小hack：
foreach(GridViewRow row in YourGridViewControlID.Rows) { if (row.RowType == DataControlRowType.DataRow ) { ((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");"); } }
这样，我们在GridView的每个CheckBox的OnChange事件上添加了JavaScript函数调用。 什么是特殊的，我们无法通过HTML实现的是我们在JavaScript函数中传递每个Row Index ，这是我们稍后需要的。
2. HTML部分的一些重要说明
确保Checkbox控件和Textbox控件，但更重要的是你的GridView控件具有静态id，使用ClientIDMode="Static" ，如下所示：
对于GridView控件：
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的列号。
因此，如果您的CheckBox位于GridView的第一列，那么您需要.cells[0] 。
如果您的TextBox位于GridView的第二列，那么您需要.cells[1] （在我的情况下， TextBox位于我的GridView的第三列，因此，我使用.cells[2] ）
我还发现语句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); } }
您可以像这样定义网格：
你的Javascript函数将是：
这个Javascript函数被称为文本框的onblur事件。 当同时调用此函数时，它传递的参数只是文本框ID。
在javascript函数内部使用参数，即我们得到的vaue文本框的id。
这是代码：
var cntNbr = $("#" + obj.id).val();
然后对于网格内可用的每个“txtPeriod”控件，我们需要为它们分配当前“txtPeriod”文本框值的值。
循环网格识别每个“txtPeriod”可用：这是代码：
$("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) { });
在这个循环中，我们需要将“txtPeriod”（当前/修改）值分配给其他“txtPeriod”文本框。在分配其良好实践以检查它是null还是NAN。 这是代码：
if ($.trim($(this).val()) != "") if (!isNaN($(this).val())) { $(this).val(cntNbr); }
大家好，你有非常简单的解决方案
假设你的网格是这样的：
和你的javascript找到你的网格内的控件是
使用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); }
var x = document.getElementById('<%=grdResults.ClientID%>').querySelectorAll("input"); var i; var cnt = 0; for (i = 0; i < x.length; i++) { if(x[i].type== "checkbox" && x[i].checked) cnt++; } alert("item selected=" + cnt);