单击复选框时显示/隐藏 Gridview 控件 - Javascript

Question

我的 gridview 第一列包含一个 tetxbox 和标签。第二列包含复选框。当用户单击“check_all”复选框时，应显示所有行的文本框。最初它被设置为不可见。标签也应该消失。 当用户点击每一行的单个复选框时，相应的文本框应该出现并且标签应该消失。如何使用 javascript 实现这一点？

<asp:TemplateField  
         HeaderText="Add Note" 
         itemstyle-horizontalalign="Center"  >
    <ItemTemplate>
         <asp:Label ID="Label1" 
                    runat="server" 
                    Text='<%# Eval("notes") %>'>
          </asp:Label>
          <asp:TextBox ID="TextBox1" 
                       runat="server" 
                       Width="100px" 
                       Text='<%# Eval("notes") %>' 
                       Visible="false">
           </asp:TextBox> 
     </ItemTemplate>
           <HeaderStyle HorizontalAlign="Center" 
                        VerticalAlign="Middle" 
                        Width="60px"/>
            <ItemStyle  HorizontalAlign="Center"  
                        Width="60px">
            </ItemStyle>
</asp:TemplateField>

<asp:TemplateField HeaderStyle-HorizontalAlign="Center">
         <HeaderTemplate>
               <asp:CheckBox ID="check_all"  
                             onclick="ShowHideChkBx(this)"  
                             runat="server" 
                             EnableViewState="true" 
                             CssClass="gridcheckbox"  />
          </HeaderTemplate>
          <ItemTemplate>
                  <asp:CheckBox ID="CheckBox1"
                                onclick="ShowHideChkBx(this)"
                                runat="server" Checked="false"  />
           </ItemTemplate>
</asp:TemplateField>

Javascript 代码：

      function ShowHideChkBx(ele) {

        var GridView = document.getElementById('<%=GridView1.ClientID %>')
        var checkBoxes = GridView.getElementsByTagName("input");
        for (i = 1; i < GridView.rows.length; i++) {

        }
        if (ele.checked) { //to check all checkboxes when user clicks on check_all
            for (var i = 1; i < checkBoxes.length; i++) {
                if (checkBoxes[i].type == "checkbox") {
                    checkBoxes[i].checked = true;
                }
                if (checkBoxes[i].type == "text") {
                    checkBoxes[i].disabled = false;
                }
            }
        }
        else
        {
            for (var i = 1; i < checkBoxes.length; i++) {
                if (checkBoxes[i].type == "checkbox") {
                    checkBoxes[i].checked = false;
                }
            }
        }
      }

Answer 1

它可以写得更好，但基本上你的 Javascript 应该是这样的：

// Add a shim for browsers not supporting .closest()
if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest =
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {};
        } while ((i < 0) && (el = el.parentElement));
        return el;
    };
}

function onCheckboxClick(el) {
    var row = el.closest('tr'); // current row
    var textbox = row.querySelector("#TextBox1"); // textbox in the same row
    var label = row.querySelector("#Label1"); // label in the same row

    // if current checkbox is checked show textbox and hide label
    if (el.checked) {
      textbox.style.visibility = "visible";
      label.style.visibility = "hidden";
    // if current checkbox is unchecked hide textbox and show label
    } else {
      textbox.style.visibility = "hidden";
      label.style.visibility = "visible";
    }
}

只记得更改复选框上的处理程序：

<asp:CheckBox ID="CheckBox1"  onclick="onCheckboxClick(this)"  runat="server" Checked="false"  />