JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<select id="selectMe">
  <option value="none">Choose country</option>
  <option value="sweden">sweden</option>
  <option value="other">other</option>
</select>


<div id="wrapper" class="group" style="display:none;">
  <BLOCKQUOTE><font size="4" face="Alice">Choose payment method</font></BLOCKQUOTE><HR>
  <form name="jump">

    <div class="sweden" style="display:none;">
      <input type="radio" name="a" value="http://facebook.com" />Klarna checkout<br>
      <input type="radio" name="a" value="http://google.com" />Paypal<br>
      <input type="radio" name="a" value="http://paypal.com" />cash on delivery<br>
    </div>

    <div class="other" style="display:none;">
      <input type="radio" name="a" value="http://paypal.com"/>Paypal<br>
    </div>

    <input id="checkout" type="button" value="Proceed to checkout" />

  </form>
</div>

JavaScript

$(document).ready(function () {
    var group = $('.group');
    $('#selectMe').change(function () {
        $('form[name="jump"] :radio').prop('checked', false);
        var selected = $(this).val();
        group[selected !== 'none'? "show" : "hide"]();
        group.find('div').hide();
        $('.'+selected).show();
    });
    
    $('#checkout').bind('click', function() {
        var selectedVal = $('form[name="jump"] :radio:checked').val();
        if ( selectedVal ) {
            alert (selectedVal);
            //location.href = selectedVal;
        }
    });
});