Question

我有两个单选按钮，想要发布所选按钮的值。如何通过jQuery获取值？

我可以像这样得到所有这些：

$("form :radio")

我如何知道选择了哪一个？

Answer 1

要获取ID为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>

Answer 2

使用此..

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

Answer 3

如果您已经有对单选按钮组的引用，例如：

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

Answer 4

这应该有效：

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

注意输入周围的“使用：检查而不是像Peter J的解决方案”

Answer 5

您可以使用：checked选择器和无线电选择器。

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

Answer 6

如果您只想要布尔值，即是否选中它，请尝试：

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

Answer 7

获取所有无线电：

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

过滤以获得已检查的

radios.filter(":checked")

Answer 8

另一种选择是：

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

Answer 9

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

Answer 10

以下是我如何编写表格并处理收到的格式电台。

使用名为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();

在输入上有一个类名允许我轻松设置输入样式......

Answer 11

在我的情况下，我在一个表格中有两个单选按钮，我想知道每个按钮的状态。以下内容对我有用：

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

Answer 12

在 JSF 生成的单选按钮（使用<h:selectOneRadio>标记）中，您可以执行以下操作：

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

其中selectOneRadio ID为 radiobutton_id ，表单ID为 form_id 。

请确保使用名称而不是 id ，因为jQuery使用此属性（名称由JSF自动生成，类似于控件ID ）。

Answer 13

我写了一个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来试一试它，看看它是如何工作的。

Fiddle

Answer 14

如果你有单个形式的多个单选按钮，那么

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

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

这对我有用。

Answer 15

另外，检查用户是否选择了任何内容。

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

Answer 16

这很好用

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

Working Demo

:checked选择器适用于checkboxes，radio buttons和选择元素。仅对于选择元素，请使用:selected选择器。

API for :checked Selector

Answer 17

 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

Answer 18

获取使用类的所选无线电的值：

$('.class:checked').val()

Answer 19

使用此：

value = $('input[name=button-name]:checked').val();

Answer 20

我使用这个简单的脚本

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

Answer 21

DEMO ：https://jsfiddle.net/ipsjolly/xygr065w/

＆＃13;

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });

＆＃13;

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

＆＃13;

Answer 22

如果你在1个表单上只有一组单选按钮，那么jQuery代码就像这样简单：

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

Answer 23

我已经发布了一个图书馆来帮助解决这个问题。实际上，拉出所有可能的输入值，但也包括检查了哪个单选按钮。您可以在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"
}

Answer 24

要检索JavaScript数组中的所有单选按钮值，请使用以下jQuery代码：

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

Answer 25

试一试 -

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

console.log(radioVal);

Answer 26

获得它的另一种方法：

＆＃13;

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });

＆＃13;

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

＆＃13;

Answer 27

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

Answer 28

从this question开始，我想出了一种替代方法，可以在input事件中为其各自的标签访问当前选定的click。这是因为新选择的input在label点击事件发生之后才更新。

<强> TL; DR

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

  ...
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 29

我需要做的是简化C＃代码，这在前端JavaScript中尽可能多地做。我使用的是字段集容器，因为我在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() !== ''){

    }

只需说明任何包含ID的包含标签即可。对于DNNers，这很有用。这里的最终目标是将在SQL Server中开始部件搜索所需的内容代码传递给中级代码。

这样我也不必复制更复杂的以前的C＃代码。繁重的工作正在这里进行。

我不得不为此寻找一点，然后修补它以使其发挥作用。所以对于其他DNNers，希望这很容易找到。

Answer 30

jQuery获取表单中的所有单选按钮和检查值。

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

Answer 31

尝试

myForm.myOption.value

function check() {
  console.log( myForm.myOption.value );
}

<form id="myForm">
  <input type="radio" name="myOption" value="1"> 1 <br>
  <input type="radio" name="myOption" value="2"> 2 <br>
  <input type="radio" name="myOption" value="3"> 3 <br>
</form>
<button onclick="check()">check</button>

Answer 32

此解决方案不需要 jQuery。

const RADIO_NAME = "radioName";
const radios = Array.from(document.getElementsByName(RADIO_NAME));
const checkedRadio = radios.filter(e=>e.checked);

这里使用了 jQuery：

const radios = Array.from($(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked);

jQuery 添加了此处不需要的额外抽象层。

您也可以使用：

const radios = Array.from(document.querySelectorAll(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked)[0];

但是 getElementsByName 已经足够简单明了。

Answer 33

您需要使用:checked选择器进行访问：

检查此文档：

https://api.jquery.com/checked-selector/

一个例子：

$('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>

Answer 34

怎么样？

使用更改并检查单选类型的值...

$('#my-radio-form').on('change', function() {
  console.log($('[type="radio"]:checked').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="my-radio-form">
  <input type="radio" name="input-radio" value="a" />a
  <input type="radio" name="input-radio" value="b" />b
  <input type="radio" name="input-radio" value="c" />c
  <input type="radio" name="input-radio" value="d" />d
</form>

Answer 35

**请尝试以下示例检查选中的**中的哪个单选按钮

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

Answer 36

jQuery插件，用于设置和获取单选按钮值。它还尊重它们上的“更改”事件。

 <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>
    <script type="text/javascript">
    $( document ).ready(function() {
     //Get all radios:
     var radios = jQuery("input[type='radio']");
     checked_radios=radios.filter(":checked");
for(i=0;i<checked_radios.length;i++)
{
   console.log(checked_radios[i]);
}

    });
    </script>

或另一种方式

<script type="text/javascript">
$( document ).ready(function() {
  //Get all radios:
  checked_radios=jQuery('input[name=radio]:checked').val(); 
for(i=0;i<checked_radios.length;i++)
{
   console.log(checked_radios[i]);
}

});
</script>

Answer 37

除了CSS选择器:checked外，您还可以使用prop function（从jQuery 1.6开始）。我不记得我在哪个项目上工作，仅使用$('#something').is(':checked')有时只能奏效，而在失败时我也使用$('#something').prop('checked')奏效，但导致我同时使用了两者。

在下面的代码段中，我编写了两个辅助函数is_checked和get_group_value。函数is_checked返回布尔值true / false；如果检查了传递给参数的输入（也检查prop()函数），则返回true；否则，则返回false。函数get_group_value接受单选输入的name并返回已检查的单选输入的值；如果未选中则返回空字符串。这些帮助器功能还将与复选框一起使用，而不仅仅是单选按钮。

由于该问题未定义何时何时检索值，因此我针对四（3）种不同的情况编写了一些侦听器：与任何单选按钮进行交互时，提交表单，然后单击这些硬编码按钮之一以一次性获取组的值。

请注意，我使用“单击”来标识用户与单选输入元素进行交互的时间，因为“更改”将永远不会触发，因为无论是否选中“值”属性都不会更改。我将其用于复选框以及单选按钮。

function is_checked(input) {
  var $input = $(input);
  return $input.is(':checked') || $input.prop('checked'); //Returns a boolean value. True if checked, false if not.
}
function get_group_value(group_name) {
  var $inputs = $('[name="' + group_name + '"]:checked');
  if ($inputs.length) { return $inputs.first().val(); } //If it exists, return the value of the first one found
  return ''; //If it doesn't exist, return nothing
}
$('form').on('submit', function(e) {
  e.preventDefault();
  var $form = $(this), results = {};
  $form.find('input[type=radio]').each(function() {
    var $input = $(this);
    if (is_checked(this)) {
      results[$input.attr('name')] = $input.val();
    }
  });
  console.info('Form Results', results);
});
$('form input[type=radio]').on('click', function(e) {
  var group_name = $(this).attr('name');
  console.info('Radio Button Click', group_name, get_group_value(group_name));
});
$('button.radio-button').on('click', function(e) {
  var group_name = $(this).attr('id');
  console.info('Button Click', group_name, get_group_value(group_name));
});

.my-test {
  background: #ffffff;
  color: #000000;
  padding: 16px;
}

form {
  padding: 8px;
  border: 1px solid #999999;
}

fieldset {
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-test">
  <form>
    Group 1
    <fieldset>
      <label><input type="radio" name="example-1" value="Foo" required />Foo</label>
      <label><input type="radio" name="example-1" value="Bar" required />Bar</label>
    </fieldset>
    Group 2
    <fieldset>
      <label><input type="radio" name="example-2" value="Banana" required />Banana</label>
      <label><input type="radio" name="example-2" value="Apple" required />Apple</label>
    </fieldset>
    <button type="submit">Submit</button>
  </form>
  <p>Press this button to just get the value of the first group: <button class="radio-button" id="example-1">Foo or Bar?</button></p>
  <p>Press this button to just get the value of the second group: <button class="radio-button" id="example-2">Banana or Apple?</button></p>
</div>

Answer 38

尝试这个。它对我有用 $（'input [type =“ radio”] [name =“ name”]：checked'）。val（）;

Answer 39

您可以调用函数 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>

我怎么知道通过jQuery选择了哪个单选按钮？

39 个答案:

检查此文档：