JQuery получить значение выбранного переключателя

557

Постановка проблемы проста. Мне нужно посмотреть, выбрал ли пользователь радиокнопку из группы радиостанций. Все переключатели в группе имеют одинаковый идентификатор.

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

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

В дополнение к этому, когда выбран переключатель, он не добавляет атрибут «checked» в элемент управления, просто проверяемый текст (я думаю, только свойство, проверенное без значения) . Ниже показано, как выглядит выбранное радиоуправление.

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Кто-нибудь может мне помочь с кодом JQuery, который может помочь мне получить значение проверенного переключателя?

user1114212
источник
71
У вас есть несколько элементов с одинаковым идентификатором? Это ужасно.
Мэтт Болл
2
Возможный дубликат Как я могу узнать, какое радио выбрано через jQuery?
Алекс Ангас
Как это работает с их одинаковым идентификатором? При оценке по идентификатору не останавливается ли оценка на первом сопоставленном элементе? Какова цель, они показывают динамические элементы в разное время?
Марк Карпентер-младший
1
К сведению, помощник ASP.NET MVC @ Html.RadioButtonFor сгенерирует все переключатели с одинаковым идентификатором. упс.
Трийнко

Ответы:

1120

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

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

Так легко это.

Парвин Верма
источник
25
Не забудьте про кавычки: $ ("input [name = '" + fieldName + "']: флажок"). Val ();
Атара
4
@Guraprasad Рао: Это правильный код - кавычки не нужны в этом случае. Попробуйте и посмотрите.
Стефан
2
Почему это возвращает «on», а не значение, которое я указал в HTML? РЕДАКТИРОВАТЬ: Потому что у меня не было кавычек вокруг моих значений.
Винсент
3
$. ( 'вход [имя = "name_of_your_radiobutton"]: проверено') Вал ();
Самера Прасад Джаясинге
1
Обратите внимание, что если ни одна кнопка не выбрана, она просто вернется null, что логично, но иногда может сбить вас с толку, когда вы привыкли видеть ""значение по умолчанию при .val()вызове.
xji
313

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

Чтобы получить значение выбранного радиокнопки, выберите его по имени с помощью :checkedфильтра.

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

РЕДАКТИРОВАТЬ

Таким образом, вы не можете контролировать имена. В этом случае я бы сказал, что поместите все эти переключатели внутри элемента div с именем скажем radioDiv, а затем немного измените ваш селектор:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}
Адам Рэкис
источник
75

Простейший способ получить значение выбранного переключателя заключается в следующем:

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

Между селектором не должно быть пробела.

Hardik
источник
Самый простой вариант, это.
andreszs
44
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Обязательно оберните это в функцию готовности DOM ( $(function(){...});или $(document).ready(function(){...});).

Purag
источник
Я всегда получаю пустое значение с этим кодом .. Я думаю, это связано с тем, что у меня нет свойства со значением, проверенным только проверенный текст (я не уверен, что мы можем считать его свойством)
user1114212
Вы выбираете переключатель по его идентификатору? Вы изменили radioIDего идентификатор?
Пураг
37
  1. В вашем коде jQuery просто ищет первый экземпляр ввода с именем q12_3, который в этом случае имеет значение 1. Вы хотите, чтобы вход с именем q12_3 был :checked.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Обратите внимание, что приведенный выше код не совпадает с использованием .is(":checked"). is() Функция jQuery возвращает логическое значение (true или false), а не элемент.
Мадука Дилхан
источник
28
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

Это вернет проверенное значение переключателя.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}
Сумит Харшан
источник
24
 $("input[name='gender']:checked").val()

для вложенных атрибутов

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

Не забывайте одиночные скобки для имени


источник
20

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

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

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

radios.filter(":checked");

ИЛИ

Другой способ узнать значение переключателя

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();
Фейсал
источник
3
Я использую, $('[name=your_inputs_names]:checked').val()потому что они всегда имеют одно и то же уникальное имя
vladkras
4
Хорошее использование.filter()
Марк Карпентер-младший
2
Это .filter(). Я бы хотел, чтобы этот ответ был наверху.
Юсрил Маулидан Раджи
16

Чтобы получить значение выбранной радиокнопки, используйте RadioButtonName и идентификатор формы, содержащий RadioButton.

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

ИЛИ только

$('form input[type=radio]:checked').val();
надир
источник
12

Проверьте пример, он работает нормально

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();

Раджнеш Тхакур
источник
12

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

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>

MistyDawn
источник
12

Используйте код ниже

$('input[name=your_radio_button_name]:checked').val();

Обратите внимание, что атрибут value должен быть определен так, чтобы в вашем результате могли быть "Male" или "Female".

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>
Ананд
источник
7

Попробуйте это с примером

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>
Saroj
источник
7

Только по имени

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});
Арун Прасад Е.С.
источник
6
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something
Тадей магаджна
источник
1
Зачем сравнивать строки с тем, undefinedкогда вы наверняка знаете, какое значение должно быть checked? Там нет необходимости в JQuery.
Девин Берк
В вопросе я не вижу никакой информации о том, что одна радио-кнопка будет проверена с самого начала. Я имею в виду, что это в большинстве случаев с переключателями. Так что в случае, когда мы должны были проверить это, и ни один из них не был выбран, attr («флажок») вернул бы нулевой объект.
Тадей Магаджна
Да, но я просто имел в виду, что возвращение нулевого значения не приведет к ошибке, поэтому сравнение с "undefined"ним не нужно.
Девин Берк
5

Вы можете получить значение выбранной радиокнопки по Id, используя это в javascript / jQuery.

$("#InvCopyRadio:checked").val();

Я надеюсь, это поможет.

vishpatel73
источник
очень эффективный !!
MHJ
4

Лучший способ объяснить эту простую тему - дать простой пример и ссылку:

В следующем примере у нас есть две радиокнопки. Если пользователь выбирает какую-либо радиокнопку, мы отобразим выбранное значение радиокнопки в окне предупреждения.

Html:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

JQuery: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });
Брэд Ларсон
источник
4

Я знаю, что присоединяюсь так поздно. Но стоит упомянуть, что это занимает

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

А потом я проверил это в моем JS. Это может быть как

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

`

Ashish
источник
3
<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

и обрабатывать jquery для оповещения, как для значения, установленного / измененного через div id:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

это так просто ....: -}

Badal
источник
Более простой способ сделать это с помощью родительского идентификатора был бы .... $ ("# subscription"). On ("change", function () {var selection = $ (this) .find ("input: checked") .val (); alert (selection);});
MistyDawn
3

Еще один простой способ понять ... Это работает:

HTML-код:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Код Jquery:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});
Виджай Дева
источник
3

переключатель мультигруппы скрытого значения в массив

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

Али Аласади
источник
Можете ли вы добавить некоторые объяснения, чтобы больше людей могли понять.
Шантешвар Инд
2

Я не javascript человек, но я нашел здесь для поиска этой проблемы. Для тех, кто гуглит и находит здесь, я надеюсь, что это поможет некоторым. Итак, как в вопросе, если у нас есть список переключателей:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

Я могу найти, какой выбран с этим селектором:

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

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

Вот очень простой пример jsfiddle .

Юсуф Узун
источник
1
Это неправильное использование атрибута имени для радиовходов. Радиокнопки в группе должны иметь одинаковое имя, если вы хотите разрешить только одно значение из группы. Делая это таким образом, он работает как флажки, позволяя выбирать несколько элементов вместо одного выбора в группе.
MistyDawn
@ MistyDawn вы правы, я даже не помню, как я это написал, возможно, это из-за исправления ошибки.
Юсуф Узун
2

Вот 2 переключателя, а именно rd1 и Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

Простейший способ проверить, какой переключатель отмечен, путем проверки отдельного свойства (": checked")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }
Mohan
источник
Это не очень надежное решение. Лучше просто иметь содержащий div, а затем посмотреть на все радиостанции под ним и выберите отмеченный. Вы также можете посмотреть все радио с определенным именем, а затем найти проверенный. Это уменьшает необходимость менять код каждый раз, когда добавляется кнопка.
Ричард Дуерр
Если на вашей странице имеется более 2 радиовходов, это может ОЧЕНЬ запутать, и назначение идентификатора каждому радио будет очень трудоемким. Этот метод обычно не считается хорошей практикой.
MistyDawn
2

Даже inputне обязательно, как подсказывают другие ответы. Следующий код также может быть использован:

var variable_name = $("[name='radio_name']:checked").val();
shivamag00
источник
По сути, это то же самое, что и ответ пять лет назад, только без inputи с ненужными кавычками.
Еретик Обезьяна
Эти цитаты не являются ненужными, и причина, по которой я разместил ответ выше, состоит в том, чтобы дать людям понять, что ввод не нужен
shivamag00
Тогда вам следует рассмотреть возможность редактирования вашего вопроса, чтобы упомянуть эти причины, а не использовать команду «Использовать следующий код». Вы можете ссылаться на источник, который говорит, что цитаты необходимы.
Еретик Обезьяна
@HereticMonkey Закончил редактирование ... Спасибо :)
shivamag00
1
    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`
Сандип Кумар
источник
1
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});
Г-жа Сохель Рана
источник
1

Если вы не знаете отдельного имени или хотите проверить все радиовходы в форме, вы можете использовать глобальную переменную для проверки значения для каждой радиогруппы только один раз: `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`
Штеффен
источник