如何使复选框选中，单击“从下拉列表中选择一个选项: JS”

Question

我有两个无线电台输入，当我从选择下拉菜单选择一个选项时，我想要检查。

我有这样一个选择框：

<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">

如何使所选选项与选定的单选按钮相等？

例如，如果选择了第一个选项，则选中第一个无线框，反之亦然。

Answer 1

从单选按钮中删除checked="checked"并尝试。

<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>

Answer 2

使用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
   }    
});

您也可以添加条件来选择radio按钮。

Answer 3

基于相关要素的立场的简单解决方案：

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

尝试：

https://jsfiddle.net/nwk5fez9/