问题描述:

I have a few radio buttons, one of which is the 'other' button. If a user clicks 'other' I want to show a text box asking for more info. This is my HTML and JS:

 <div class="radio">

<label><input type="radio" name="optradio">Friend</label>

</div>

<div class="radio">

<label><input type="radio" name="optradio"> Worked together </label>

</div>

<div class="radio">

<label><input type="radio" name="optradio"> Studied together</label>

</div>

<div class="radio">

<label><input type="radio" name="other-radio" id="connection-invite-other-radio"> Other </label>

</div>

<div class="form-group" id="connection-invite-other">

<input type="text" class="form-control" >

</div>

JS:

$(document).ready(function(){

if($('#connection-invite-other-radio').is(':checked')) {

$('#connection-invite-other').show();

console.log("hi");

}

else {

$('#connection-invite-other').hide();

}

});

This however isn't working. Please help me understand if I'm doing something wrong. Thanks!

网友答案:
  1. The radio needs to have the same name, in your case optradio.
  2. You need to use a change event listener on all radio elements.

$(document).ready(function() {
  $('input[type=radio]').change(function() {
    if ($('#connection-invite-other-radio').is(':checked')) {
      $('#connection-invite-other').show();
    } else {
      $('#connection-invite-other').hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="radio">
  <label>
    <input type="radio" name="optradio">Friend</label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optradio">Worked together</label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optradio">Studied together</label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optradio" id="connection-invite-other-radio">Other</label>
</div>
<div class="form-group" id="connection-invite-other">
  <input type="text" class="form-control">
</div>
网友答案:

You need to call change event of radio button to show hide div.

$(document).ready(function(){

   $('#connection-invite-other-radio').change(function(){
    if($(this).is(':checked')) {        
        $('#connection-invite-other').show();
        console.log("hi");
    }

    else {
        $('#connection-invite-other').hide();
    }
   });    
});
相关阅读:
Top