2016-11-03 2 views
-1

Здесь какой-то код когда я нажмите кнопку радио выберите вариант изменить, но когда я выбираю вариант выбранного радио, но не провереноЕсли я выбрать кнопку выбора опции радио sholud проверить

<select id="flight_select"> 

$('.select-change').click(function(){ 
 
    $('#flight_select').val($(this).data('val')).trigger('change'); 
 
})

<select id="flight_select">   
    <option value="A">Only Fly</option> 
    <option value="B">Fly + Bag</option> 
    <option value="C">Fly + Bag + Eat</option> 
</select> 

<input type="radio" name="flightType" id="only_fly" class="select-change" data-val="A"> 
<input type="radio" name="flightType" id="fly_bag" value="fly2" class="select-change" data-val="B"> 
<input type="radio" name="flightType" id="fly_bag_eat" value="fly3" class="select-change" data-val="C"> 
+1

проверить то, что я сделал пару и дайте мне знать, если это то, что вы хотите сделать. https://jsfiddle.net/trhqes25/2/ –

+0

Следует ли использовать прослушиватель событий «change»? https://jsfiddle.net/trhqes25/1/ – evolutionxbox

ответ

2

Вам необходимо прикрепить событие изменения выпадающего меню, а затем ba sed на выбранном значении проверьте переключатель.

$('.select-change').change(function() { 
 
    $('#flight_select').val($(this).data('val')); 
 
}); 
 

 
// attach change event handler 
 
$('#flight_select').change(function() { 
 
    // select radio based on `data-val` attribute 
 
    // and then set the checked property 
 
    $('.select-change[data-val="' + this.value + '"]').prop('checked', true); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="flight_select"> 
 
    <option value="A">Only Fly</option> 
 
    <option value="B">Fly + Bag</option> 
 
    <option value="C">Fly + Bag + Eat</option> 
 
</select> 
 

 
<input type="radio" name="flightType" id="only_fly" class="select-change" data-val="A"> 
 
<input type="radio" name="flightType" id="fly_bag" value="fly2" class="select-change" data-val="B"> 
 
<input type="radio" name="flightType" id="fly_bag_eat" value="fly3" class="select-change" data-val="C">


FYI: Это всегда лучше использовать изменения событие вместо события нажатия на кнопку радио, так как щелчок событие срабатывает даже когда вы нажимаете проверенное радио.

0

Необходимо связать событие change с номером select, также .trigger('change') является избыточным.

$('.select-change').click(function() { 
 
    $('#flight_select').val($(this).data('val')); 
 
}); 
 

 
$('#flight_select').change(function() { 
 
    $('.select-change[data-val=' + $(this).val() + ']').prop('checked', true) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="flight_select"> 
 
    <option value="A">Only Fly</option> 
 
    <option value="B">Fly + Bag</option> 
 
    <option value="C">Fly + Bag + Eat</option> 
 
</select> 
 

 
<input type="radio" name="flightType" id="only_fly" class="select-change" data-val="A"> 
 
<input type="radio" name="flightType" id="fly_bag" value="fly2" class="select-change" data-val="B"> 
 
<input type="radio" name="flightType" id="fly_bag_eat" value="fly3" class="select-change" data-val="C">

Смежные вопросы