如何知道通过jQuery选择了哪些单选按钮？

小开

最佳答案

要获取idmyForm的表单的选择radioName项的值：

$('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"><fieldset><legend>Choose radioName</legend><label><input type="radio" name="radioName" value="1" /> 1</label> <br /><label><input type="radio" name="radioName" value="2" /> 2</label> <br /><label><input type="radio" name="radioName" value="3" /> 3</label> <br /></fieldset></form>

小开

您可以使用：选中选择器以及无线电选择器。

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

小开

用这个…

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

小开

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

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

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

请务必使用姓名而不是id，如上所示，因为jQuery使用此属性（姓名由类似于控件ID的JSF自动生成）。

小开

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

小开

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

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

小开

这应该工作：

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

注意输入周围使用的“已检查而不是”，就像Peter J的解决方案一样

小开

获取所有无线电：

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

过滤器以获得检查的那个

radios.filter(":checked")

小开

另一种选择是：

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

小开

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

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

小开

如果你有多个单选按钮在单一的形式

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

这是为我工作。

小开

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

小开

在我的情况下，我有一个形式的两个单选按钮，我想知道每个按钮的状态。下面的工作对我来说：

// get radio buttons valueconsole.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>

小开

以下是我如何写表格并处理检查无线电的获取。

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

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

小开

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

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

小开

我写了一个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') {
//setterchangeRadioButton(this, value);return $(this);
} else {
//getterreturn 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来实际尝试它，看看它是如何工作的。

小提琴

小开

使用这个：

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

小开

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

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

小开

如果你只想要布尔值，即如果它被选中或没有尝试：

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

小开

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

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

小开

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

小开

我用这个简单的脚本

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

小开

这个很好用

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

工作演示

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

:checked Selector的API

小开

从这个问题开始，当您在相应标签的click事件中时，我想出了一种替代方法来访问当前选定的input。原因是新选择的input直到其label的单击事件之后才会更新。

太长别读

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

小开

$(function () {// Someone has clicked one of the radio buttonsvar myform= 'form.myform';$(myform).click(function () {var radValue= "";$(this).find('input[type=radio]:checked').each(function () {radValue= $(this).val();});})});

小开

试试看

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

小开

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>

小开

我需要做的是简化C#代码，即尽可能多地在前端JavaScript中完成。我使用的是字段集容器，因为我在DNN中工作，它有自己的表单。所以我不能添加表单。

我需要测试3个输入框中的哪个正在使用，如果是，搜索的类型是什么？从值开始，包含值，值的精确匹配。

超文本标记语言：

<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来说，这是很好的了解。这里的最终目标是将在SQLServer中开始零件搜索所需的内容传递给中级代码。

通过这种方式，我也不必复制更复杂的以前的C#代码。繁重的工作就在这里完成。

我必须寻找一些这个，然后修补它才能使它工作。所以对于其他DNNer来说，希望这很容易找到。

小开

另一种方法来获得它：

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

小开

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

小开

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

小开

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

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

小开

这个怎么样？

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

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

小开

**请尝试以下示例以检查所选单选按钮**

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

小开

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

小开

试试看

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>

小开

除了CSS选择器:checked，您还可以使用道具功能（从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 foundreturn ''; //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>

小开

试试这个。对我有用

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

小开

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

小开

使用$('input[name="radioName"]').filter(":checked").val();对我来说是最好的方法。

测试过了这个管用

形式

<form id="myForm"><input type="radio" name="radioName" value="Option1"> Option1<input type="radio" name="radioName" value="Option2" checked> Option2<input type="radio" name="radioName" value="Option3"> Option3</form>

jQuery

$(document).ready(function() {$('input[name="radioName"]').on('change', function() {const val = $(this).filter(":checked").val();alert(val);})
// First load checkconst val = $('input[name="radioName"]').filter(":checked").val();alert(val);});

这里的例子：https://codepen.io/abinhho/pen/mdLrqbX