javascript - 我如何知道通过 jQuery 选择了哪个单选按钮？

Question

我有两个单选按钮，想发布所选单选按钮的值。如何使用 jQuery 获得价值？

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

$("form :radio")

我怎么知道选择了哪一个？

score 4178 · Accepted Answer

要获取具有 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>

score 447 · Accepted Answer

447

用这个..

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

于 2010-01-07T00:45:35.760 回答

score 331 · Accepted Answer

如果您已经引用了单选按钮组，例如：

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

score 153 · Accepted Answer

这应该有效：

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

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

score 86 · Accepted Answer

86

您可以将 :checked 选择器与单选选择器一起使用。

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

于 2009-02-27T20:00:25.963 回答

score 75 · Accepted Answer

如果您只想要布尔值，即是否已检查，请尝试以下操作：

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

score 58 · Accepted Answer

获取所有收音机：

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

过滤以获取选中的那个

radios.filter(":checked")

score 55 · Accepted Answer

55

另一种选择是：

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

于 2011-09-21T19:35:22.653 回答

score 33 · Accepted Answer

33

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

于 2010-10-16T20:20:16.097 回答

score 27 · Accepted Answer

就我而言，我在一种形式中有两个单选按钮，我想知道每个按钮的状态。这对我有用：

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

score 26 · Accepted Answer

以下是我将如何编写表单并处理检查收音机的获取。

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

在输入上有一个类名可以让我轻松地为输入设置样式......

score 18 · Accepted Answer

在JSF生成的单选按钮（使用<h:selectOneRadio>标记）中，您可以这样做：

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

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

一定要使用name代替id，因为 jQuery 使用这个属性（name由 JSF 自动生成，类似于控件 ID）。

score 17 · Accepted Answer

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

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

score 17 · Accepted Answer

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

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

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

这对我有用。

score 16 · Accepted Answer

我编写了一个用于设置和获取单选按钮值的 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 来尝试它，看看它是如何工作的。

小提琴

score 14 · Accepted Answer

14

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

于 2012-07-17T12:01:46.803 回答

score 14 · Accepted Answer

这工作正常

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

工作演示

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

API 用于:checked Selector

score 12 · Accepted Answer

12

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

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

于 2013-01-11T18:05:37.697 回答

score 11 · Accepted Answer

我使用这个简单的脚本

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

score 10 · Accepted Answer

10

用这个：

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

于 2013-08-10T18:22:13.617 回答

score 10 · Accepted Answer

10

试试这个。它对我有用

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

于 2020-09-28T11:48:29.237 回答

score 8 · Accepted Answer

演示：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>

score 6 · Accepted Answer

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

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

score 5 · Accepted Answer

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

score 5 · Accepted Answer

JQuery 获取表单中的所有单选按钮和选中的值。

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

尝试一下-

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

console.log(radioVal);

score 3 · Accepted Answer

另一种获取方式：

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

尝试

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>

score 1 · Accepted Answer

从这个问题，我想出了另一种方法来访问当前选择的input当您在click其各自标签的事件中时。原因是因为新选择的对象在其click 事件input之后才更新。label

TL;博士

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

score 1 · Accepted Answer

我需要做的是简化 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，希望这很容易找到。

score 1 · Accepted Answer

您需要使用: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>

score 1 · Accepted Answer

这个怎么样？

使用更改并获取无线电类型的值被检查...

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

用于设置和获取单选按钮值的 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>

score 0 · Accepted Answer

除了 CSS 选择器:checked，您还可以使用prop 函数（从 jQuery 1.6 开始）。我不记得我正在从事的项目中，$('#something').is(':checked')有时仅使用仅有效，并且在失败时我也使用$('#something').prop('checked')了有效，但这使我同时使用了两者。

在下面的代码片段中，我编写了两个辅助函数，is_checked并且get_group_value. 该函数is_checked返回一个布尔真/假值；如果检查了传入参数的输入（也检查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>

score 0 · Accepted Answer

此解决方案不需要 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足够简单明了。

score -1 · Accepted Answer

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

javascript - 我如何知道通过 jQuery 选择了哪个单选按钮？

39 回答 39

检查此文档：

Related

Reference