Получить значение кнопки радио с помощью JQuery

Question

У меня есть эта часть кода:

var checkout_options = $("#checkout").find("input[type='radio']"); 
 
    $('#button-account').on('click', function() { 
 
      alert(checkout_options.value); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<div id="checkout"> 
 
    <p>Checkout Options:</p> 
 
    <label for="register"> 
 
     <input type="radio" name="account" value="register" id="register" checked> 
 
     <b>Register Account</b></label> 
 
    <br> 
 
    <label for="guest"> 
 
     <input type="radio" name="account" value="guest" id="guest"> 
 
     <b>Guest Checkout</b> 
 
    </label> 
 
    <input type="button" value="Continue" id="button-account"> 
 
</div>

То, что я хочу, чтобы получить значение выбранной радио-кнопки, но с моим кодом Я получаю только первое значение переключателя, второе радио не работает. Просьба помочь мне исправить ошибку.

Answer 1

Вам необходимо использовать this для ссылки на элемент внутри обратного вызова. Получите значение, используя this.value или $(this).val() способ. Хотя избегайте селектора псевдокласса :checked, иначе он выбирает только первый элемент.

var selected = $("#checkout").find("input[type='radio']"); 
 
    selected.change(function(){ 
 
     alert(this.value); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<div id="checkout"> 
 
    <p>Checkout Options:</p> 
 
    <label for="register"> 
 
     <input type="radio" name="account" value="register" id="register" checked> 
 
     <b>Register Account</b></label> 
 
    <br> 
 
    <label for="guest"> 
 
     <input type="radio" name="account" value="guest" id="guest"> 
 
     <b>Guest Checkout</b> 
 
    </label> 
 
</div>

---

Вы можете сделать это проще, используя селектор :radio псевдо-класс

$("#checkout :radio").change(function() { 
 
    alert(this.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
<div id="checkout"> 
 
    <p>Checkout Options:</p> 
 
    <label for="register"> 
 
    <input type="radio" name="account" value="register" id="register" checked> 
 
    <b>Register Account</b> 
 
    </label> 
 
    <br> 
 
    <label for="guest"> 
 
    <input type="radio" name="account" value="guest" id="guest"> 
 
    <b>Guest Checkout</b> 
 
    </label> 
 
</div>

Answer 2

Ваш обработчик только будучи присоединять ed для переключателя, который установлен, поэтому для второго переключателя не существует обработчика. Прикрепите обработчик для обоих переключателей:

var $radioBtn = $("#checkout").find("input[type='radio']"); 

$radioBtn.on('change', function() { 
    if (this.checked) { 
    alert(this.value); 
    } 
}); 

Answer 3

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

var selected = $("#checkout").find("input[name='account']"); 
selected.change(function(){ 
    alert($(this).val()); 
}); 

Это также гарантирует, что только текущая кнопка радио группа включена, так что вы можете иметь дополнительные.

Jsfiddle: https://jsfiddle.net/sjmhdasw/

Answer 4

Просто используйте

$("input[type='radio']").on("change", function() { console.log(this.id + " checked !"); });

Он связывает приемник событий на всех входах типа радио!

Нет необходимости хранить селекторы внутри переменной (если вы делаете что-то с ним, где-то в вашем коде)