Как я могу узнать, какая радиокнопка выбрана с помощью jQuery?

Question

У меня есть две радиокнопки, и я хочу опубликовать значение выбранного. Как я могу получить значение с помощью jQuery?

Я могу получить их все так:

$("form :radio")

Как узнать, какой из них выбран?

Answer 1

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

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>

Answer 2

В сгенерированной радиокнопке JSF (с использованием тега <h:selectOneRadio>) вы можете сделать это:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

, где идентификатор selectOneRadio равен radiobutton_id , а идентификатор формы равен form_id .

Обязательно используйте name вместо id , как указано, поскольку jQuery использует этот атрибут ( name генерируется автоматически JSF, напоминающим идентификатор элемента управления).

Answer 3

Кроме того, убедитесь, что пользователь ничего не выбирает.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

Answer 4

Я написал плагин jQuery для установки и получения значений переключателей. Он также учитывает событие «изменения» на них.

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

Поместите код в любое место, чтобы включить надстройку. Тогда наслаждайтесь! Он просто переопределяет стандартную функцию val, ничего не нарушая.

Вы можете посетить этот jsFiddle, чтобы попробовать его в действии и посмотреть, как он работает.

Fiddle

Answer 5

Если у вас несколько переключателей в одной форме, тогда

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

Это работает для меня.

Answer 6

отлично работает

$('input[type="radio"][class="className"]:checked').val()

Рабочая демоверсия

Селектор :checked работает для checkboxes, radio buttons и выбирает элементы. Только для выбранных элементов, используйте селектор :selected.

API для :checked Selector

Answer 7

 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

Answer 8

Чтобы получить значение выбранного радио, которое использует класс:

$('.class:checked').val()

Answer 9

Используйте это:

value = $('input[name=button-name]:checked').val();

Answer 10

Я использую этот простой скрипт

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});