CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
SHOBHAN
SHOBHAN

Reputation: 51

How to hide a div on unchecking the checkbox

I have a checkbox ,when the checkbox clicks it will display a div ,if unchecked the div has to hide,I have tried this code but it is not working properly,oncheck it is showing the div but it's not hiding

Code:

<div style="clear:both;" class="tab">
                    <input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" /> Schedule Campaign
                    <div  id="datediv" class="red boxs"   style="display: none">
                    <!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
                    <label>Select date & time to schedule</label></br>
                    <input type="text" id="scheduledatetime" name="scheduledatetime"/><label id="schedule_error" class="error"> </label>
                    <!--<input type="text" id="datepickerad"/>-->
                </div>  
                </div>

And the JS code:

$('#schedulecheck').on('ifChecked', function(event){
     // alert();
           if($(this).attr("value")=="red"){
                $(".red").show();
            }

    });
    $('#schedulecheck').on('unChecked', function(event){
      if($(this).attr("value")=="red"){
                $(".red").hide();
            } 

    });

Upvotes: 1

Views: 1197

Answers (4)

SmartDev
SmartDev

Reputation: 2862

Use this:

$("#schedulecheck").on("click", function () {
    $(".red").toggle($(this).is(":checked"));
});

This is "the cross-browser-compatible way to determine if a checkbox is checked" as jQuery recomands it (see http://api.jquery.com/prop/#prop1 for more details).

Upvotes: 0

Med.Amine.Touil
Med.Amine.Touil

Reputation: 1235

Ty this code 

$('#schedulecheck').on('click',function () {
 if($(this).is(':checked'))
    $(".red").show();
 else
   $(".red").hide();
});

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15913

$('#schedulecheck').click(function () {
    $(".red").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="clear:both;" class="tab">
  <input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" />Schedule Campaign
  <div id="datediv" class="red boxs" style="display:none" >
    <!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
    <label>Select date & time to schedule</label>
    </br>
    <input type="text" id="scheduledatetime" name="scheduledatetime" />
    <label id="schedule_error" class="error"></label>
    <!--<input type="text" id="datepickerad"/>-->
  </div>

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can rather use .change() function for listening change event. and use .toggle(flag) with flag being true/false based on checked value for making show/hide decision:

 $('#schedulecheck').change(function(){
    $(".red").toggle(this.checked);
 });

Working Demo

Upvotes: 0

Related Questions