1

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();
            } 

    });
SHOBHAN
  • 51
  • 8
  • 2
    possible duplicate of [How to show/hide an element on checkbox checked/unchecked states using jQuery?](http://stackoverflow.com/questions/18307323/how-to-show-hide-an-element-on-checkbox-checked-unchecked-states-using-jquery) – Umesh Sehta Mar 11 '15 at 08:04

4 Answers4

1

$('#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>
Tushar Gupta
  • 15,504
  • 1
  • 29
  • 47
  • I have included this code,due to some of the datepicker plugins it's not allowing to display the checkbox – SHOBHAN Mar 11 '15 at 08:59
0

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

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • I have included this code,due to some of the datepicker plugins it's not allowing to display the checkbox – SHOBHAN Mar 11 '15 at 08:59
0

Ty this code 

$('#schedulecheck').on('click',function () {
 if($(this).is(':checked'))
    $(".red").show();
 else
   $(".red").hide();
});
Med.Amine.Touil
  • 1,225
  • 2
  • 11
  • 15
0

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

SmartDev
  • 2,802
  • 1
  • 17
  • 22