使用jQuery在复选框上显示/隐藏GridView的列

我已经为gridview的每一列创建了复选框。在一个复选框取消选中，我躲在一列相关该复选框，并在其入住，我M重新显示特定的列使用jQuery在复选框上显示/隐藏GridView的列

在我的代码，我米使用单独的JavaScript函数为每个复选框的操作，所以，我的问题是：有没有办法让我可以只有1个js函数的所有复选框？（喜欢的东西使用访问DOM元素的jQuery指数为基础的方法）

这里是我的代码

<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#chk1").click(function() { 
       $("table tr").find("th:eq(0)").toggle(); 
       $("table tr").find("td:eq(0)").toggle(); 
      }); 
      $("#chk2").click(function() { 
       $("table tr").find("th:eq(1)").toggle(); 
       $("table tr").find("td:eq(1)").toggle(); 
      }); 
      $("#chk3").click(function() { 
       $("table tr").find("th:eq(2)").toggle(); 
       $("table tr").find("td:eq(2)").toggle(); 
      }); 
      $("#chk4").click(function() { 
       $("table tr").find("th:eq(3)").toggle(); 
       $("table tr").find("td:eq(3)").toggle(); 
      }); 
      $("#chk5").click(function() { 
       $("table tr").find("th:eq(4)").toggle(); 
       $("table tr").find("td:eq(4)").toggle(); 
      }); 
     }); 
    </script> 
<body> 
    <form id="form1" runat="server"> 
    <div align="center"> 
    <asp:CheckBox ID="chk1" Text="Id" Checked="true" runat="server" /> 
    <asp:CheckBox ID="chk2" Text="Name" Checked="true" runat="server" /> 
    <asp:CheckBox ID="chk3" Text="Password" Checked="true" runat="server" /> 
    <asp:CheckBox ID="chk4" Text="Email Id" Checked="true" runat="server" /> 
    <asp:CheckBox ID="chk5" Text="Designation" Checked="true" runat="server" /> 
     <asp:GridView ID="gv" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true"> 
      <Columns> 
       <asp:BoundField DataField="Id" HeaderText="Emp Id" /> 
       <asp:BoundField DataField="EmpName" HeaderText="Emp Name" /> 
       <asp:BoundField DataField="EmpPassword" HeaderText="Password" /> 
       <asp:BoundField DataField="Email" HeaderText="Email Id" /> 
       <asp:BoundField DataField="Designation" HeaderText="Designation" /> 
      </Columns> 
     </asp:GridView> 
    </div> 
    </form> 
</body>

来源

2014-05-19 Prashant2329

$("input[id^='chk']").change(function() { 
    var id = $(this).attr('id'); 
    var res = id.substring(3, 4); 

    $("table tr").find("th:eq("+(parseInt(res)-1)+")").toggle(); 
    $("table tr").find("td:eq("+(parseInt(res)-1)+")").toggle(); 
});

来源

2014-05-19 06:29:49 vintot

问题解决了......感谢好友！ – Prashant2329

这里我添加了一个通用类和值的所有复选框：试试这个：

<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

     $(".cbox").click(function() { 
    var cbox_val = $(this).val(); //Get the current checkbox value 0,1,2.. 

     //Add these to selector  
     $("table tr").find("th:eq("+cbox_val+")").toggle(); 
     $("table tr").find("td:eq("+cbox_val+")").toggle(); 
    }); 

     }); 
    </script> 
<body> 
    <form id="form1" runat="server"> 
    <div align="center"> 

    <asp:CheckBox class="cbox" value="0" ID="chk1" Text="Id" Checked="true" runat="server" /> 
    <asp:CheckBox class="cbox" value="1" ID="chk2" Text="Name" Checked="true" runat="server" /> 
    <asp:CheckBox class="cbox" value="2" ID="chk3" Text="Password" Checked="true" runat="server" /> 
    <asp:CheckBox class="cbox" value="3" ID="chk4" Text="Email Id" Checked="true" runat="server" /> 
    <asp:CheckBox class="cbox" value="4" ID="chk5" Text="Designation" Checked="true" runat="server" /> 
     <asp:GridView ID="gv" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true"> 
      <Columns> 
       <asp:BoundField DataField="Id" HeaderText="Emp Id" /> 
       <asp:BoundField DataField="EmpName" HeaderText="Emp Name" /> 
       <asp:BoundField DataField="EmpPassword" HeaderText="Password" /> 
       <asp:BoundField DataField="Email" HeaderText="Email Id" /> 
       <asp:BoundField DataField="Designation" HeaderText="Designation" /> 
      </Columns> 
     </asp:GridView> 
    </div> 
    </form> 
</body>

来源

2014-05-19 04:50:43 byJeevan

var cbox_val = $（this）.val（）; //获取当前复选框的值0,1,2 .. 复选框被选中或未选中，那么上面的行是什么意思呢？（ – Prashant2329

不能正常工作!!!! – Prashant2329

嘿，你现在面临什么错误？ – byJeevan

使用jQuery在复选框上显示/隐藏GridView的列

回答

相关问题