How to made a checkbox checked onclick on select an option from drop down: JS

Question

I have 2 radio box inputs that I want to check when I select an option from a select dropdown menu.

I have a select box as like this:

<div id="checkout-shipping-method-load">
    <select id="shipping-method">
        <option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
        <option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
    </select>
</div>

And radio boxes like:

 <input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
 <input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">

How can I make the selected option equal the selected radio button?

For example, if the first option is selected, then the first radio box is checked, or vice-versa.

oh sorry its typo error just consider it as radio@Mr. Engineer — Xabby, Feb 04 '16 at 16:56

score 2 · Answer 1 · answered Feb 04 '16 at 17:02

2

It is very simple on using jquery,

$('#shipping-method').on('change', function(){
   var criteria = $(this).val(); // will give you selected option value
   if(criteria === 'Your Value')  // your condition here
   {
       $('#s_method_flatrate2_flatrate2').attr('checked',true); // checking the radio button
   }    
});

You can similarly add conditionals to choose your radio buttons

answered Feb 04 '16 at 17:02

Santhosh

8,181
4
29
56

prop() should be used instead of attr() – devlin carnate Feb 04 '16 at 17:44

score 2 · Answer 2 · answered Feb 04 '16 at 17:15

Simple solution based on positions of related elements:

$('#shipping-method').change(function(){
   var optionSelected = $("option:selected", this);
   $(".radio:eq("+ optionSelected.index() +")").prop("checked", true);
});

Try:
https://jsfiddle.net/nwk5fez9/

Nana Partykar · Accepted Answer · 2016-02-04T17:10:41.470

Remove checked="checked" from radio button and try.

<div id="checkout-shipping-method-load">
    <select id="shipping-method">
          <option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
          <option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
    </select>
</div>


<input type="radio" class="radio" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>

$('#shipping-method').change(function(){
    var option= $('#shipping-method').val();
    if(option == 'option1') {
        $('#s_method_flatrate2_flatrate2').attr('checked',true);
    }
    if(option == 'option2') {
        $('#s_method_flatrate_flatrate').attr('checked',true);
    }
});
</script>

score 1 · Answer 4 · answered Feb 04 '16 at 17:10

I really like San Krish's solution, but for the sake of completeness, here's my answer (in plain JS):

I'm simply going to check for the change event on the select box, then set the corresponding index of the radio buttons.

var select = document.getElementById("shipping-method"),
    rbs = document.getElementsByName("shipping_method");

select.addEventListener("change", function () {
  rbs[select.selectedIndex].checked = true;
});

<div id="checkout-shipping-method-load">
  <select id="shipping-method">
    <option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
    <option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
  </select>
</div>

<input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">

Please note, that if you use this, the indices of the options and radio buttons must correspond; it would be wise to add other checks in the event listener.

score 1 · Answer 5 · edited May 23 '17 at 12:15

You can set the checked property of the radio button using Jquery, like so:

JQUERY:

$('#shipping-method').change(function() {
  if ($(this).val() === "option1") {
    $('#flatrate').prop('checked', true);
  } else if ($(this).val() === "option2") {
    $('#flatrate2').prop('checked', true);
  } else {
    $('#flatrate2').prop('checked', false);
    $('#flatrate').prop('checked', false);
  }
});

NOTES:

Since JQuery 1.6, you should be using prop() and not attr().
I've also added a default "SELECT" option to your drop down (see below), with logic to unset both radio buttons if that default is selected. This is not required, but I added it in case it's useful for you.

HTML:

<div id="checkout-shipping-method-load">
  <select id="shipping-method">
    <option value="">SELECT</option>
    <option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
    <option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
  </select>
</div>

<input type="radio" class="radio" id="flatrate2" value="flatrate2_flatrate2" name="shipping_method">Flat 2
<input type="radio" class="radio" id="flatrate" value="flatrate_flatrate" name="shipping_method">Flat 1

JSFiddle Demo here.

How to made a checkbox checked onclick on select an option from drop down: JS

5 Answers5