CODEWITHSUNDEEP
jqueryhtml
katie hudson
katie hudson

Reputation: 2893

JQuery radio button hide and display div

I was just wondering if there is a more effecient way of doing something. I have the following html

<div class="form-group">
    <div class="col-md-6">
        <label class="radio-inline"><input type="radio" name="optradio" id="opOne" checked>Option 1</label>
        <label class="radio-inline"><input type="radio" name="optradio" id="opTwo">Option 2</label>
    </div>
</div>
<div class="form-group" id="optionOneDiv">
    <label class="control-label col-sm-3">Account Number: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionOne" id="optionOne">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>
<div class="form-group" id="optiontwoDiv">
    <label class="control-label col-sm-3">Credit Card: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionTwo" id="optionTwo">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>

If the first radio button is clicked, optionOneDiv should display and optiontwoDiv should be hidden. If the second radio button is checked, optiontwoDiv should display and the other one hidden. What I have done is this

$('#optionTwoDiv').css('display', 'none');

$('input:radio[name="optradio"]').change(
    function(){
        if ($(this).is(':checked')) {
            if($(this).attr('id')=='opOne') {
                $('#optionOneDiv').css('display', 'block');
                $('#optionTwoDiv').css('display', 'none');
            } else {
                $('#optionOneDiv').css('display', 'none');
                $('#optionTwoDiv').css('display', 'block');
            }
        }
    });

It works, seems like a lot of code to me though. Is there a better way to achieve what I am after?

Thanks

Upvotes: 0

Views: 2184

Answers (2)

Domain
Domain

Reputation: 11808

You need to make following changes to get desire output-

1.add value attribute to the radio button.see example below-

<label class="radio-inline"><input type="radio" name="optradio" id="opOne" value='first' checked>Option 1</label>
        <label class="radio-inline"><input type="radio" name="optradio" id="opTwo" value='second'>Option 2</label>

2.After make changes in the html you need to write following code in js file.

$('#optiontwoDiv').hide();

$('.radio-inline').change(function(){

  var selected_radio_value = $("input[name=optradio]:checked").val();

  if(selected_radio_value == 'first')
  {
      $('#optionOneDiv').show();
      $('#optiontwoDiv').hide();
  }
    if(selected_radio_value == 'second')
  {
       $('#optionOneDiv').hide();
      $('#optiontwoDiv').show();
  }


    });

To check example use following link-

http://jsfiddle.net/sbuyw255/1/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You can use the toggle() method like

$('input[name="optradio"]:radio').change(function () {
    $('#optionOneDiv').toggle(this.id == 'opOne');
    $('#optionTwoDiv').toggle(this.id == 'opTwo');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="col-md-6">
        <label class="radio-inline"><input type="radio" name="optradio" id="opOne" checked>Option 1</label>
        <label class="radio-inline"><input type="radio" name="optradio" id="opTwo">Option 2</label>
    </div>
</div>
<div class="form-group" id="optionOneDiv">
    <label class="control-label col-sm-3">Account Number: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionOne" id="optionOne">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>
<div class="form-group" id="optiontwoDiv">
    <label class="control-label col-sm-3">Credit Card: <sup class="req">*</sup></label>
    <div class="col-md-6">
        <input class="form-control" type="text" name="optionTwo" id="optionTwo">
        <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
    </div>
</div>

If there are more options then you can use a meta driven approach like

$('input[name="optradio"]:radio').change(function() {
  var $div = $('#' + this.id + 'Div').show();
  $('.option-div').not($div).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-md-6">
    <label class="radio-inline">
      <input type="radio" name="optradio" id="optionOne" checked>Option 1</label>
    <label class="radio-inline">
      <input type="radio" name="optradio" id="optiontwo">Option 2</label>
  </div>
</div>
<div class="form-group option-div" id="optionOneDiv">
  <label class="control-label col-sm-3">Account Number: <sup class="req">*</sup>
  </label>
  <div class="col-md-6">
    <input class="form-control" type="text" name="optionOne" id="optionOne">
    <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
  </div>
</div>
<div class="form-group option-div" id="optiontwoDiv">
  <label class="control-label col-sm-3">Credit Card: <sup class="req">*</sup>
  </label>
  <div class="col-md-6">
    <input class="form-control" type="text" name="optionTwo" id="optionTwo">
    <span class="glyphicon glyphicon-ok form-control-feedback correct"></span>
  </div>
</div>

Upvotes: 2

Related Questions