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 >

На додаток до цього, коли вибрано перемикач, він не додає атрибут "перевірений" до контрольного тексту щойно перевірений (я думаю, просто властивість перевірено без значення) . Нижче - як виглядає вибраний радіоуправління

<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, який може допомогти мені отримати значення перевіреної радіо-кнопки?


71
У вас кілька елементів з однаковим ідентифікатором? Це жахливо.
Метт Бал


Як це працює з усіма ними, що мають однаковий ідентифікатор? Коли оцінювання за ідентифікатором не оцінюється на першому елементі, який відповідає? Яка мета тут - це динамічні елементи, що відображаються в різний час?
Марк Карпентер молодший

1
FYI, ASP.NET MVC's @ Html.RadioButtonДо помічника буде генеруватися всі радіо кнопки з однаковим ідентифікатором. ой.
Трайнко

Відповіді:


1119

Просто використовуйте.

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

Так просто.


25
Не забувайте лапок: $ ("input [name = '" + fieldName + "']: перевірено"). Val ();
Атара

4
@Guraprasad Rao: Це правильний код - цитати в цьому випадку не потрібні. Спробуйте і подивіться.
Стефан

2
Чому це повернення "увімкнено", а не значення, яке я вказав у HTML? EDIT: Тому що у мене не було цитат навколо моїх значень.
Вінсент

3
$ ('input [name = "name_of_your_radiobutton"]: перевірено "). val ();
Sameera Prasad Jayasinghe

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();
}

EDIT

Отже, ви не маєте контролю над іменами. У такому випадку я б сказав, що покладіть ці радіо кнопки всередину діва, названого, скажімо radioDiv,, а потім трохи змініть ваш селектор:

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

75

Найпростіший спосіб отримати значення вибраної радіо кнопки:

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

Між селектором не слід використовувати пробіл.


Найпростіший варіант - це.
Андрес

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(){...});).


Я завжди отримую порожнє значення з цим кодом. Я думаю, це пов’язано з тим, що у мене немає властивості зі значенням, що перевіряється, лише текст перевірений (я не впевнений, чи можна вважати це властивістю)
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 повертає булева (істинна чи помилкова), а не елемент.

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


12

Використовуйте нижче код

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

Зверніть увагу, атрибут value має бути визначений, щоб у вашому результаті можна було отримати "Чоловіче" або "Жіноче".

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

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 ("перевірено") поверне нульовий об'єкт.
Tadej Magajna

Правильно, але я мав на увазі повернення нуля не спричинить помилку, тому порівняння "undefined"непотрібне.
Девін Берк

5

Ви можете отримати значення вибраної радіо кнопки Id за допомогою цього в javascript / jQuery.

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

Сподіваюся, це допоможе.


дуже ефективно !!
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();
    }
});
});

`


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());
            });

це так просто ....: -}


Простішим способом зробити це за допомогою батьківського ідентифікатора було б .... $ ("# підписки"). On ("зміни", функція () {var selection = $ (this) .find ("input: перевірено") .val (); попередження (вибір);});
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


ви можете, будь ласка, додати пояснення, щоб більше людей могли зрозуміти.
Shanteshwar Inde

2

Я не особа javascript, але я знайшла тут для пошуку цієї проблеми. Тому, хто його google і знайде тут, я сподіваюся, що це допоможе дещо. Отже, як і питання, чи є у нас перелік радіо кнопок:

<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();

Навіть якщо немає вибраного елемента, я все одно не можу визначити помилку. Отже, вам не доведеться писати додатково, якщо заява перед тим, як приймати значення елемента.

Ось дуже основний приклад jsfiddle .


1
Це неправильне використання атрибута імені для радіовходів. Радіо кнопки в групі повинні мати однакове ім'я, якщо ви хочете дозволити одне значення з групи. Це робить його таким чином, як прапорці, що дозволяє робити кілька виборів замість одного вибору в групі.
MistyDawn

@MistyDawn ти маєш рацію, я навіть не пам'ятаю, як це писав, напевно, це виправлення помилки.
Юсуф Узун

2

Ось 2 радіо кнопки, а саме rd1 та Radio1

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

Найпростіший спосіб перевірити, який перемикач перевіряється, перевіряючи окремі властивості (": перевірено")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

Це не дуже надійне рішення. Краще просто мати вміщений div, а потім подивитися на всі радіостанції під ним і вибрати позначений. Ви також можете переглянути всі радіостанції з певним іменем, а потім знайти зареєстроване. Це зменшує необхідність змінювати код щоразу, коли додається кнопка.
Річард Дуерр

Якщо на вашій сторінці є більше 2 входів для радіо, це може ДУЖЕ заплутатись, а присвоєння ідентифікатора кожному радіо буде дуже трудомістким. Цей метод зазвичай не вважається хорошою практикою.
MistyDawn

2

Навіть inputне потрібно, як пропонують інші відповіді. Наступний код також може бути використаний:

var variable_name = $("[name='radio_name']:checked").val();

Це по суті те саме, що ця відповідь від п’яти років тому, тільки без 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, щоб перевірити значення для кожної радіогрупи лише один раз: `

        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());
            }
        });`
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.