Як я можу дізнатися, який перемикач вибраний через jQuery?


2702

У мене є дві перемикачі і хочу розмістити значення вибраного. Як я можу отримати значення за допомогою jQuery?

Я можу отримати їх усіх так:

$("form :radio")

Як я можу знати, який із них обраний?

Відповіді:


3933

Щоб отримати значення вибраного radioName елемента форми з id 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 працює найкраще при правильному розміщенні, а вибір за ідентифікатором - це завжди найвищий селектор. Метод з двома аргументами - це просто інший спосіб зробити це.
Пітер J

40
Для найкращої роботи документація рекомендує не використовувати: радіоселектор. api.jquery.com/radio-selector
Пітер Дж

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

409

Використовуй це..

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

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

3
Це поверне лише значення першої радіо кнопки, яка перевіряється у формі. Це слід робити так, як запропонував Петро Дж.
MickJ

3
@MickJ Цей фрагмент коду той самий, що й у Пітера Дж ... З огляду на випадки використання оригінального питання. Однак якщо у вас є різні групи перемикачів, вона не працюватиме. Тому краще використовувати [name = selector]
Lyth

1
Як згадував @Brad, це отримає лише значення першого набору. Що ви хочете, це замінити ".val ()" на ".map (function () {return this.value;}). Get ();"
am_

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

139

Це має працювати:

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

Зауважте, що "" використовується навколо вводу: перевірено, а не '", як рішення Пітера Дж


це має бути обрана відповідь. ім'я - це дуже приємний спосіб відстеження радіо кнопок
quemeful

79

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

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

13
Це виглядає приємно, проте документація jQuery рекомендує використовувати [type = radio], а не: радіо для кращої продуктивності. Це компроміс між читабельністю та продуктивністю. Я зазвичай беру читабельність щодо продуктивності таких дрібниць, але в цьому випадку я думаю, що [type = radio] насправді зрозуміліший. Так що в цьому випадку це виглядатиме як $ ("введення форми [тип = радіо]: перевірено"). 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 ідентифікатор radiobutton_id і форму ідентифікатор form_id .

Обов’язково використовуйте name, а не 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); 
});

Використовуйте подію натискань, а не подію зміни, якщо ви хочете, щоб вона працювала у всіх браузерах
Метт Браун


8

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


6

Якщо у вас є лише 1 набір радіо кнопок на 1 формі, код jQuery настільки ж простий:

$( "input:checked" ).val()

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, коли відбудеться подія його клацання.

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.