Question

我为gridview的每一列创建了复选框。在UnCheck的复选框上，我隐藏了一个相关列到该复选框并且在检查它时，我再次显示该特定列

在我的代码中，我为每个复选框的操作使用单独的javascript函数，所以，我的问题是：有没有办法使我只能为所有复选框提供1个js函数???? （类似于使用基于jquery索引的方法访问DOM元素）

这是我的代码

<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>

Answer 1

在这里，我为所有复选框添加了一个公共类和值：试试这个：

<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>

Answer 2

$("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(); 
});

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

2 个答案: