2016-10-11 21 views
0

jqueryを初めて使用しています。私は機能を作りたい。ユーザーがチェックボックスをオンにすると、divが非表示になります。私はそれをしようとしていますが、それは動作していません。 私の間違いを教えてください。チェックボックスがオンの場合はチェックボックスをオンにしたい場合はdivを非表示にします。それ以外の場合はチェックを外します。

コードあなたが

あなたのhtmlにidではなく、クラスを持っているIDを標的にする必要があるときは、クラスをターゲットしている

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="../Scripts/jquery-1.8.2.js"></script> 
     <link href="../Content/bootstrap.css" rel="stylesheet" /> 
    <script type="text/javascript"> 

     function valueChanged() { 
      debugger; 
      if ($('.chkYes').is(":checked")) 
       $("#hidedivs").hide(); 


     } 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
     <div class="container"> 
      <div class="row"> 
        <div class="col-lg-6"> 
         <asp:Label runat="server" ID="lblFirstName" Text="First Name"></asp:Label> 
        </div> 
       <div class="col-lg-6"> 
        <asp:TextBox runat="server" ID="txtFname" class="form-control" placeholder="Enter your First Name"></asp:TextBox> 
        </div> 
       </div> 
      &nbsp 
      <div class="row"> 
        <div class="col-lg-6"> 
         <asp:Label runat="server" ID="lblLastName" Text="Last Name"></asp:Label> 
        </div> 
       <div class="col-lg-6"> 
        <asp:TextBox runat="server" ID="txtLname" class="form-control" placeholder="Enter your Last Name"></asp:TextBox> 
        </div> 
       </div> 
      &nbsp 
      <div class="row" id="hidedivs"> 
        <div class="col-lg-6"> 
         <asp:Label runat="server" ID="lblAge" Text="Age"></asp:Label> 
        </div> 
       <div class="col-lg-6"> 
        <asp:TextBox runat="server" ID="txtAge" class="form-control" placeholder="Enter your Age"></asp:TextBox> 
        </div> 
       </div> 
      &nbsp 
      <div class="row"> 
       <div class="col-lg-6"> 
        <asp:label runat="server" ID="IsSapApplicable" Text="Is SAP Applicable"></asp:label> 
       </div> 
       <div class="col-lg-6"> 
        <asp:Label runat="server" ID="lblYes" Text="Yes"></asp:Label> 
        <input type="checkbox" id="chkYes" onchange="valueChanged();" value="1"/> 

        <asp:Label runat="server" ID="lblNo" Text="No"></asp:Label> 
        <input type="checkbox" id="chkNo"/> 
       </div> 
      </div> 
    </div> 
    </form> 
</body> 
</html> 
+2

http://stackoverflow.com/questions/19447591/show-hide-div-when-checkbox -selected – nicholas

+0

私は答えを書いている間に閉じました。チェックボックスをクラスでラジオに変更し、次のようなものを持っている必要があります: '$(function(){ $( '.chk')。on(" click "、function(){ $("#hidedivs " ) }); – mplungjan

+0

これは重複しているとマークされていますが、リンク先の質問も不明瞭で終了しました。別のエラーがあります。コードではIDを指定する必要があるときにクラスを探しています。問題のコードを重複としてマークする前に、コードを詳しく調べてはいけませんか? – TommyBs

答えて

0

次の通り。 ""お使いのjQueryのセレクタでクラスを表し、 '#' のIDです

<input type="checkbox" id="chkYes" onchange="valueChanged();" value="1"/> 


    if ($('.chkYes').is(":checked")) 
      $("#hidedivs").hide(); 

でなければなりません

if ($('#chkYes').is(":checked")) 
      $("#hidedivs").hide(); 
関連する問題