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


2708

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

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

$("form :radio")

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

Ответы:


3937

Чтобы получить значение выбранного radioName элемента формы с идентификатором myForm:

$('input[name=radioName]:checked', '#myForm').val()

Вот пример:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>


306
Я закончил тем, что использовал это: $ ('ввод формы [тип = радио]: проверено')
июнь

46
@PeterJ: Почему вы использовали два аргумента вместо простого '#myform input[name=radioName]:checked'?
Софи Алперт,

145
jQuery работает лучше всего при правильной области видимости, а выбор по идентификатору всегда является самым эффективным. Метод с двумя аргументами - просто другой способ сделать это.
Питер Дж

40
Для достижения наилучших результатов в документации рекомендуется не использовать: селектор радио. api.jquery.com/radio-selector
Питер Дж

2
Альтернатива: $ ('. ClassName: флажок');
Meetai.com

410

Использовать этот..

$("#myform input[type='radio']:checked").val();

64
Я думаю, что если ваша форма имеет несколько наборов переключателей, она получит значение только первого набора.
Брэд

3
Это вернет значение только первой переключателя, который отмечен в форме. Это должно быть сделано так, как предложил Питер Дж.
MickJ

3
@MickJ Этот кусок кода такой же, как и у Питера Дж ... Рассматривая вариант использования исходного вопроса. Однако, если у вас есть различные группы переключателей, это не сработает. Вот почему лучше использовать [name = selector]
Lyth

1
Как упомянуто @Brad, это только получит значение первого набора. Вы хотите заменить ".val ()" на ".map (function () {return this.value;}). Get ();"
13

1
Для чего это стоит (да, я знаю, оптимизация раньше, чем нужно, бла-бла), но для чистой производительности это работает быстрее, особенно в старых браузерах:$("#myform").find("input[type='radio']:checked").val();
Марк Шультхайс

307

Если у вас уже есть ссылка на группу переключателей, например:

var myRadio = $("input[name=myRadio]");

Используйте filter()функцию, а не find(). ( find()предназначен для поиска дочерних / дочерних элементов, тогда как filter()поиск элементов верхнего уровня в вашем выборе.)

var checkedValue = myRadio.filter(":checked").val();

Примечания. В этом ответе изначально исправлялся другой ответ, который рекомендовано использовать find(), который, похоже, с тех пор был изменен. find()может быть полезен для ситуации, когда у вас уже есть ссылка на элемент контейнера, но не на переключатели, например:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

7
Я просто хотел добавить, для ясности, что find () фактически ищет все дочерние элементы (которые соответствуют данному селектору). Если вы хотите только прямых детей, используйте children ().
Мэтт Браун

139

Это должно работать:

$("input[name='radioName']:checked").val()

Обратите внимание, что «» используется вокруг ввода: проверено, а не «», как решение Питера J


это должен быть выбранный ответ. имя - это очень хороший способ отслеживать радио-кнопки
вялый

79

Вы можете использовать: проверенный селектор вместе с радио селектором.

 $("form:radio:checked").val();

13
Это выглядит хорошо, однако, документация jQuery рекомендует использовать [type = radio] вместо: radio для лучшей производительности. Это компромисс между удобочитаемостью и производительностью. Я обычно воспринимаю удобство чтения по производительности в таких тривиальных вопросах, но в этом случае я думаю, что [type = radio] на самом деле яснее. Так что в этом случае это будет выглядеть как $ ("form input [type = radio]: checked"). Val (). Тем не менее, правильный ответ.
Нет

57

Если вы хотите просто логическое значение, то есть, если оно проверено или нет, попробуйте это:

$("#Myradio").is(":checked")

53

Получить все радио:

var radios = jQuery("input[type='radio']");

Фильтр, чтобы получить тот, который проверен

radios.filter(":checked")



25

Вот как я мог бы написать форму и обработать получение проверенного радио.

Используя форму myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Получить значение из формы:

$('#myForm .radio1:checked').val();

Если вы не публикуете форму, я бы упростил ее, используя:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Тогда получение проверенного значения становится:

    $('.radio1:checked').val();

Наличие имени класса на входе позволяет мне легко стилизовать входы ...


24

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

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


1
Что вы имеете в виду статус каждой кнопки? переключатели с тем же именем позволяют проверять только одну, поэтому, если вы установите проверенную кнопку, остальные не проверяются.
Дементик

17

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

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

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

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


15

Также проверьте, не выбрал ли пользователь ничего.

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

15

Я написал плагин 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, чтобы попробовать его в действии и посмотреть, как он работает.

скрипка


14

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

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

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

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





10

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

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

Используйте событие click, а не событие change, если хотите, чтобы оно работало во всех браузерах
Мэтт Браун,


8

ДЕМО : https://jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>



5

Я выпустил библиотеку, чтобы помочь с этим. На самом деле извлекает все возможные входные значения, но также включает переключатель, который был отмечен. Вы можете проверить это на https://github.com/mazondo/formalizedata

Он даст вам объект ответов js, поэтому такая форма:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

даст тебе:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}

4

Чтобы получить все значения переключателей в массиве JavaScript, используйте следующий код jQuery:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

2
Переключатели не совпадают с флажками. В этом примере используются флажки.
Мэтт Браун


4

JQuery, чтобы получить все переключатели в форме и проверенное значение.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

3

Еще один способ получить это:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>


2
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});

1

Из этого вопроса я придумал альтернативный способ доступа к текущему выбранному, inputкогда вы находитесь в clickсобытии для соответствующего ярлыка. Причина в том, что вновь выбранный inputне обновляется до после его labelсобытия click.

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});


1

Что мне нужно было сделать, это упростить код на C #, то есть сделать как можно больше в интерфейсной части JavaScript. Я использую контейнер fieldset, потому что я работаю в DNN, и он имеет свою собственную форму. Поэтому я не могу добавить форму.

Мне нужно проверить, какое текстовое поле из 3 используется, и если это так, какой тип поиска? Начинается со значения, Содержит значение, Точное совпадение значения.

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

И мой JavaScript это:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Можно просто использовать любой содержащий тег с идентификатором. Для DNNers это полезно знать. Конечная цель здесь - перейти к коду среднего уровня, необходимому для запуска поиска деталей в SQL Server.

Таким образом, мне не нужно копировать гораздо более сложный предыдущий код C #. Тяжелый подъем делается прямо здесь.

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.