使用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的列

回答

相關問題