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

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

jquery gridview checkbox

使用jQuery在复选框上显示/隐藏GridView的列,jquery,gridview,checkbox,Jquery,Gridview,Checkbox,我已经为gridview的每一列创建了复选框。取消选中复选框时，我将隐藏与该复选框相关的列经过检查，我再次展示了这个专栏在我的代码中，我对每个复选框的操作使用单独的javascript函数，所以，我的问题是：有没有一种方法可以让我的所有复选框都只有一个js函数？？？？（类似于使用基于jquery索引的方法访问DOM元素）这是我的代码 <script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></s

我已经为gridview的每一列创建了复选框。取消选中复选框时，我将隐藏与该复选框相关的列经过检查，我再次展示了这个专栏

在我的代码中，我对每个复选框的操作使用单独的javascript函数，所以，我的问题是：有没有一种方法可以让我的所有复选框都只有一个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>


$（文档）.ready（函数（）{
$（“#chk1”）。单击（函数（）{
$（“table tr”）.find（“th:eq（0）”）.toggle（）；
$（“table tr”）.find（“td:eq（0）”）.toggle（）；
});
$（“#chk2”）。单击（函数（）{
$（“table tr”）.find（“th:eq（1）”）.toggle（）；
$（“table tr”）.find（“td:eq（1）”）.toggle（）；
});
$（“#chk3”）。单击（函数（）{
$（“table tr”）.find（“th:eq（2）”）.toggle（）；
$（“table tr”）.find（“td:eq（2）”）.toggle（）；
});
$（“#chk4”）。单击（函数（）{
$（“table tr”）.find（“th:eq（3）”）.toggle（）；
$（“table tr”）.find（“td:eq（3）”）.toggle（）；
});
$（“#chk5”）。单击（函数（）{
$（“table tr”）.find（“th:eq（4）”）.toggle（）；
$（“table tr”）.find（“td:eq（4）”）.toggle（）；
});
});

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

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


$（文档）.ready（函数（）{
$（“.cbox”）。单击（函数（）{
var cbox_val=$（this）.val（）；//获取当前复选框值0,1,2。。
//将这些添加到选择器
$（“table tr”）.find（“th:eq（“+cbox_val+”））.toggle（）；
$（“table tr”）.find（“td:eq（“+cbox_val+”））.toggle（）；
});
});

var cbox_val=$（this.val（）//获取当前复选框值0,1,2。。复选框是选中的还是未选中的，那么上面这行是什么意思？？？？？？我的问题仍然没有解决。：（$（this）.val（）；将返回单击时选中的复选框的值。假设如果单击第一个复选框，它将返回“0”。因为我们将第一个复选框的属性值设置为“0”。它不起作用，b'coz$（this）.val（）无法获取我们试图访问的复选框。错误是：无法再使用代码显示/隐藏列…如果您正确理解我的问题？？？？？[1]。请提醒“cbox\u val”[2]。是否为复选框->class=“cbox”value=“0”添加了属性？提醒（cbox\u val）没有显示任何内容！！！！请仔细阅读我的问题！！！！

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