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

【问题标题】：Show/Hide columns of GridView on checkboxes using jQuery使用 jQuery 在复选框上显示/隐藏 GridView 的列
【发布时间】：2014-07-06 22:02:39
【问题描述】：

我已经为 gridview 的每一列创建了复选框。在取消选中复选框时，我将隐藏该复选框的相关列并在检查时，我再次显示该特定列

在我的代码中，我为每个复选框的操作使用单独的 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>

【问题讨论】：

标签： jquery gridview checkbox

【解决方案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>

【讨论】：

var cbox_val = $(this).val(); //获取当前checkbox值0,1,2..checkbox要么勾选要么不勾选，那么上面一行是什么意思？？？？？？我的问题仍然没有解决。:(
$(this).val();将返回单击时选中的复选框的值。假设如果单击第一个复选框，它将返回'0; .因为我们将第一个复选框的属性值设置为'0'。
它不起作用，b'coz $(this).val() 没有得到我们试图访问的复选框。错误是：无法再使用您的代码显示/隐藏列...您是否正确理解了我的问题?????
[1]。你能提醒一下“cbox_val”吗？ [2]。您是否为复选框添加了属性 -> class="cbox" value="0" ？
alert(cbox_val) 没有显示任何东西！！！！请仔细阅读我的问题！！！！

【解决方案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(); 
});

【讨论】：