I want to click on a check box if checked box is checked than it will hide a div otherwise uncheck show

Question

I am new to jquery. I want to make a functionality. When user click on Yes checkbox a div gets hidden. I am trying to do it but its not working. Please Let me know what mistakes I am doing?

Code as Follows

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

http://stackoverflow.com/questions/19447591/show-hide-div-when-checkbox-selected — nicholas, Oct 11 '16 at 13:08
Closed while I wrote an answer. You need to change the checkboxes to radio with a class and have something like this: `$(function() { $('.chk').on("click",function() { $("#hidedivs").toggle($(this).val()==1); }); });` — mplungjan, Oct 11 '16 at 13:15
This has been marked as a duplicate, but the question linked to was also closed as unclear, and there's another error in the code where he's looking for a class when it should be an ID. Should we not be looking closer at the code in the question before marking it as a duplicate? — TommyBs, Oct 12 '16 at 06:11

score 0 · Answer 1 · answered Oct 11 '16 at 13:10

You're targetting a class when you should be targetting the id

your html has an id but not a class. "." represents a class in your jQuery selector and '#' is an id

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


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

should be

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

I want to click on a check box if checked box is checked than it will hide a div otherwise uncheck show

1 Answers1