CODEWITHSUNDEEP
jqueryradio-button
nirob
nirob

Reputation: 11

jquery hide show not work in radio button

I am trying to hide/show div with ID #edate when the selected radio input is "yes"/"no". Below is my code.

 <div id="edate">
    <label>End date</label>
    <input name="enddate" placeholder="" class="form-control" type="date">      
   </div>
   <div>
  <label>Continue</label>
  <input name="continue" id="continue" value="1" type="radio"> Yes </label>
  <input name="continue" id="nocontinue" value="0"  type="radio"> No </label>
 </div>
 <script src="jquery-2.1.4.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
    if (data.continue == 1) {
        $("#nocontinue").removeAttr('checked');
        $("#continue").attr('checked', 'checked'); 
        $("#edate").hide();
    } else {
        $("#continue").removeAttr('checked');
        $("#nocontinue").attr('checked', 'checked');
        $("#edate").show();
    }

});
</script>

Upvotes: 0

Views: 212

Answers (6)

Dhanasekar Murugesan
Dhanasekar Murugesan

Reputation: 3239

Use a common event for radio group. Also, if default is "Yes", make it as Checked in HTML.

$(function(){

$('input[name=continue]').on('click',function(){      
  if($(this).val() == "1"){
      $('#edate').show();
    }else{
    $('#edate').hide();
    }

});

});

Upvotes: 0

johannes
johannes

Reputation: 61

$('#continue,#nocontinue').on('click',function(){
  $(this).val() == '1' ? $("#edate").show() : $("#edate").hide();  
})

jsfiddle: https://jsfiddle.net/ftjpdvrz/

Upvotes: 0

JazZ
JazZ

Reputation: 4579

This question is easy to find on SO.

Here is some codes I found with 2 min search on the forum :

HTML

 <div id="edate">
    <label>End date</label>
    <input name="enddate" placeholder="" class="form-control" type="date">      
   </div>
   <div>
  <label>Continue</label>
  <input name="continue" id="continue" value="1" type="radio"> Yes </label>
  <input name="continue" id="nocontinue" value="0"  type="radio"> No </label>
 </div>

jQuery

$("input[type=radio]").click(function() {
  switch(this.value){
    case '1':
      $("#edate").show();
      break;
    case '0':
      $("#edate").hide();
      break;
  }
});

Upvotes: 0

Hackerman
Hackerman

Reputation: 12295

How about this approach:

HTML

<div id="edate">
<label>End date</label>
<input name="enddate" id="enddate" placeholder="" class="form-control" type="date">      
</div>
<div>
<label>Continue</label>
<input name="continue" class="clContinue" id="continue" value="1" type="radio"> Yes 
<input name="continue" class="clContinue" id="nocontinue" value="0"  type="radio"> No 
</div>

JQuery

$(function(){
    $('.clContinue').click(function(){
        JSON.parse($(this).val())?$('#enddate').show():$('#enddate').hide();
    });
});

Working fiddle: https://jsfiddle.net/robertrozas/3tfak798/

Upvotes: 1

user2560539
user2560539

Reputation: 

$(document).ready(function() {
   
  $("#continue").on('click',function(){
   $("#edate").hide();
  }); 
  $("#nocontinue").on('click',function(){
   $("#edate").show();
  }); 

        
 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="edate">
    <label>End date</label>
    <input name="enddate" placeholder="" class="form-control" type="date">      
   </div>
   <div>
  <label>Continue</label>
  <input name="continue" id="continue" value="1" type="radio"> Yes </label>
  <input name="continue" id="nocontinue" value="0"  type="radio"> No </label>
 </div>

Upvotes: 0

Joel Rosenberg
Joel Rosenberg

Reputation: 66

Do something, when an options is clicked like this:

$('#continue').on('click', function() {
    $("#edate").hide();
});

Upvotes: 1

Related Questions