Показать / Скрыть элементы 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"  />