Как узнать, какой переключатель выбран с помощью jQuery?

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

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

 $("form :radio")
 

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

вопрос задан 27.02.2009
juan
36922 репутация

31 ответов


  • 3579 рейтинг

    Чтобы получить значение выбранного элемента 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> 

    ответ дан Peter J, с репутацией 48708, 27.02.2009
  • 376 рейтинг

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

     $("#myform input[type='radio']:checked").val();
     
    ответ дан Joberror, с репутацией 4892, 7.01.2010
  • 268 рейтинг

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

     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();
     
    ответ дан Matt Browne, с репутацией 8246, 9.02.2011
  • 124 рейтинг

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

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

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

    ответ дан Cam Tullos, с репутацией 1800, 30.03.2011
  • 73 рейтинг

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

      $("form:radio:checked").val();
     
    ответ дан tvanfosson, с репутацией 416703, 27.02.2009
  • 46 рейтинг

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

     $("#Myradio").is(":checked")
     
    ответ дан Juan, с репутацией 628, 30.08.2013
  • 45 рейтинг

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

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

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

     radios.filter(":checked")
     
    ответ дан Alex V, с репутацией 15720, 1.09.2011
  • 41 рейтинг

    Другой вариант:

     $('input[name=radioName]:checked').val()
     
    ответ дан RedDragon, с репутацией 1218, 21.09.2011
  • 28 рейтинг
    $("input:radio:checked").val();
    
    ответ дан Phillip Senn, с репутацией 18788, 16.10.2010
  • 23 рейтинг

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

    Используя форму 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();
     

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

    ответ дан Darin Peterson, с репутацией 792, 21.09.2012
  • 20 рейтинг

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

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

    ответ дан rmbianchi, с репутацией 2234, 2.08.2012
  • 16 рейтинг

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

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

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

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

    ответ дан Francisco Alvarado, с репутацией 2546, 29.09.2010
  • 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);
     

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

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

    скрипка

    ответ дан Mathias Lykkegaard Lorenzen, с репутацией 6348, 17.04.2013
  • 14 рейтинг

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

     var radioanswer = 'none';
    if ($('input[name=myRadio]:checked').val() != null) {           
       radioanswer = $('input[name=myRadio]:checked').val();
    }
     
    ответ дан Mark, с репутацией 141, 15.11.2011
  • 14 рейтинг

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

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

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

    ответ дан Ramesh, с репутацией 149, 7.06.2012
  • 12 рейтинг

    Это прекрасно работает

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

    Рабочая демонстрация

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

    API для :checked Selector

    ответ дан Manoj, с репутацией 3374, 14.02.2015
  • 11 рейтинг
     $(".Stat").click(function () {
         var rdbVal1 = $("input[name$=S]:checked").val();
     }
    
    ответ дан Swadesh Bhattacharya, с репутацией 119, 17.07.2012
  • 11 рейтинг

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

     $('.class:checked').val()
     
    ответ дан Rodrigo Dias, с репутацией 1055, 11.01.2013
  • 9 рейтинг

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

     value = $('input[name=button-name]:checked').val();
     
    ответ дан jeswin, с репутацией 410, 10.08.2013
  • 9 рейтинг

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

     $('input[name="myRadio"]').on('change', function() {
      var radioValue = $('input[name="myRadio"]:checked').val();        
      alert(radioValue); 
    });
     
    ответ дан Lafif Astahdziq, с репутацией 2209, 19.10.2014
  • 7 рейтинг

    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> 

    ответ дан Code Spy, с репутацией 2916, 1.08.2017
  • 6 рейтинг

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

     $( "input:checked" ).val()
     
    ответ дан Randy Greencorn, с репутацией 2710, 12.08.2013
  • 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"
    }
     
    ответ дан Ryan, с репутацией 568, 23.01.2014
  • 4 рейтинг

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

     var values = jQuery('input:checkbox:checked.group1').map(function () {
        return this.value;
    }).get();
     
    ответ дан Nilesh, с репутацией 152, 3.09.2013
  • 3 рейтинг

    попробуй-

     var radioVal = $("#myform").find("input[type='radio']:checked").val();
    
    console.log(radioVal);
     
    ответ дан Gautam Rai, с репутацией 1184, 10.07.2017
  • 2 рейтинг

    Другой способ получить это:

      $("#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> 

    ответ дан Mehdi Bouzidi, с репутацией 1533, 3.10.2017
  • 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, надеюсь, это легко найти.

    ответ дан user1585204, с репутацией 380, 4.09.2017
  • 1 рейтинг

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

    TL; DR

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

     $(function() {
      // this outright does not work properly as explained above
      $('#reported label').click(function() {
        var query = $('input[name="filter"]:checked').val();
        var time = (new Date()).toString();
    
        $('.query[data-method="click event"]').html(query + ' at ' + time);
      });
    
      // this works, but fails to update when same label is clicked consecutively
      $('#reported input[name="filter"]').on('change', function() {
        var query = $('input[name="filter"]:checked').val();
        var time = (new Date()).toString();
    
        $('.query[data-method="change event"]').html(query + ' at ' + time);
      });
    
      // here is the solution I came up with
      $('#reported label').click(function() {
        var query = $('#' + $(this).attr('for')).val();
        var time = (new Date()).toString();
    
        $('.query[data-method="click event with this"]').html(query + ' at ' + time);
      });
    }); 
     input[name="filter"] {
      display: none;
    }
    #reported label {
      background-color: #ccc;
      padding: 5px;
      margin: 5px;
      border-radius: 5px;
      cursor: pointer;
    }
    .query {
      padding: 5px;
      margin: 5px;
    }
    .query:before {
      content: "on " attr(data-method)": ";
    }
    [data-method="click event"] {
      color: red;
    }
    [data-method="change event"] {
      color: #cc0;
    }
    [data-method="click event with this"] {
      color: green;
    } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="reported">
      <input type="radio" name="filter" id="question" value="questions" checked="checked">
      <label for="question">Questions</label>
    
      <input type="radio" name="filter" id="answer" value="answers">
      <label for="answer">Answers</label>
    
      <input type="radio" name="filter" id="comment" value="comments">
      <label for="comment">Comments</label>
    
      <input type="radio" name="filter" id="user" value="users">
      <label for="user">Users</label>
    
      <input type="radio" name="filter" id="company" value="companies">
      <label for="company">Companies</label>
    
      <div class="query" data-method="click event"></div>
      <div class="query" data-method="change event"></div>
      <div class="query" data-method="click event with this"></div>
    </form> 

    ответ дан Patrick Roberts, с репутацией 17118, 15.01.2016
  • 1 рейтинг
    $(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();
        });
      })
    });
    
    ответ дан JoshYates1980, с репутацией 2075, 4.05.2017
  • 0 рейтинг

    Вам нужен доступ с помощью селектора :checked :

    Проверьте этот документ:

    пример:

     $('input[name=radioName]:checked', '#myForm').val()
    $('#myForm input').on('change', function() {
    	$('#val').text($('input[name=radioName]:checked', '#myForm').val());
    }); 
     #val {
      color: #EB0054;
      font-size: 1.5em;
    } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <h3>Radio value: <span id='val'><span></h3>
    <form id="myForm">
      <input type="radio" name="radioName" value="a"> a <br>
      <input type="radio" name="radioName" value="b"> b <br>
      <input type="radio" name="radioName" value="c"> c <br>
    </form> 

    ответ дан fitorec, с репутацией 251, 18.07.2018
  • -1 рейтинг

    Вы можете вызвать функцию onChange ()

       <input type="radio" name="radioName" value="1" onchange="radio_changed($(this).val())" /> 1 <br />
      <input type="radio" name="radioName" value="2" onchange="radio_changed($(this).val())"  /> 2 <br />
      <input type="radio" name="radioName" value="3"  onchange="radio_changed($(this).val())" /> 3 <br />
    
    <script>
    function radio_changed(val){
        alert(val);
    }
    </script>
     
    ответ дан sandeep kumar, с репутацией 596, 4.07.2018