CODEWITHSUNDEEP
javascriptjqueryhtml
S.I.
S.I.

Reputation: 3375

Check/uncheck radio buttons and hide option when uncheck

I have 2 radio buttons which when I click on one of them I get dropdown menu where must choose amount.

So far I was able to make it check/unchek them but the problem is that when I uncheck the radio button dropdown doesn't hide again.

I'm not very good in javascript so please help on this one. Here is the part of code

  <div class="radio">
        <label><input type="radio" autocomplete="off" id="paypal" name="paypal"></label> PayPal
    </div>
    <div class="radio">
        <label><input type="radio" autocomplete="off" name="bank" id="bank"></label> Bank
    </div>

    <div class="form-group">
 <span id="paypalamount" style="display:none">         
        <label class="col-sm-3 control-label" for="price"></label>

        <div class="col-sm-9">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <select id="paypalamount" required="required" class="form-control">
                   <option selected value="50">50</option>
                </select>
            </div>
        </div>
 </span>           
 <span id="bankamount" style="display:none">      
        <label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>      
        <div class="col-sm-9">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <select id="bankamount" required="required" class="form-control">
                     <option selected value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>
        </div>            
    </div>              
  </span>

Here is JS

    $(document).ready(function(){
    $("#paypal").change(function(){      
        var showOrHide =$(this).is(':checked');         
            $("#paypalamount").toggle(showOrHide);
            $('[name="description"]').toggleClass('#paypalamount',showOrHide )

    });
    $("#bank").change(function(){      
        var showOrHide =$(this).is(':checked');         
            $("#bankamount").toggle(showOrHide);
            $('[name="description"]').toggleClass('#bankamount',showOrHide )

    }); 
    $("input[type='radio']").click(function()
    {
      var previousValue = $(this).attr('previousValue');
      var name = $(this).attr('name');

      if (previousValue == 'checked')
      {
        $(this).removeAttr('checked');
        $(this).attr('previousValue', false);
      }
      else
      {
        $("input[name="+name+"]:radio").attr('previousValue', false);
        $(this).attr('previousValue', 'checked');
      }
    });                      
});

And this is working demo of the code above JSFIDDLE

Upvotes: 0

Views: 2192

Answers (3)

guradio
guradio

Reputation: 15555

$(document).ready(function() {
  $(":radio[name=bankpaypal]").change(function() {
    if ($(this).is(':checked')) {
      var name = $(this).attr('id')
      $('span').hide()
      $('span#' + name + 'amount').show()
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
  <label>
    <input type="radio" autocomplete="off" id="paypal" name="bankpaypal">
  </label>PayPal
</div>
<div class="radio">
  <label>
    <input type="radio" autocomplete="off" name="bankpaypal" id="bank">
  </label>Bank
</div>

<div class="form-group">
  <span id="paypalamount" style="display:none">         
            <label class="col-sm-3 control-label" for="price"></label>

            <div class="col-sm-9">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
  <select id="paypalamount1" required="required" class="form-control">
    <option selected value="50">50</option>
  </select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">      
            <label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>      
            <div class="col-sm-9">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
<select id="bankamount1" required="required" class="form-control">
  <option selected value="50">50</option>
  <option value="100">100</option>
</select>
</div>
</div>

  1. Name of radio button should be same to select only 1
  2. ID should be unique
  3. Get the selected radio button and show its counter select using its ID since they are similar

Upvotes: 2

rbr94
rbr94

Reputation: 2277

You only need to check for the value of a RadioButton as not checked. If unchecked set the style attribute display:none for the respective dropdown again in Javascript.

Just like you do it for the checked-Status of the RadioButton and just change the condition and the actions like you want the RadioButtons to behave.

Upvotes: 1

Sasikumar
Sasikumar

Reputation: 863

Use following code to check whether a radio button is checked or not

if($("input:radio[name=paypal]:checked").val())
    alert("checked");
else
    alert("Not checked");

Do your process of hiding and showing inside the if else conditions.

Upvotes: 1

Related Questions