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

要获取 id 为表单的选定项的值：radioNamemyForm

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

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

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

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

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

请注意 input：checked 周围使用的 “”，而不是像 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 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>

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

使用名为 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') {

                //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 来试用它，看看它是如何工作的。

小提琴

使用这个：

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

工作演示

选择器适用于 、 和 select 元素。仅对于选择元素，请使用选择器。:checkedcheckboxesradio buttons:selected

API for ：checked 选择器

从这个问题中，我想出了另一种方法，当您在事件中时访问当前选择的相应标签。原因是因为新选择的 click 事件之后才会更新。inputclickinputlabel

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>

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

试试看——

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

console.log(radioVal);

演示 ： 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 个文本框中的哪个文本框，如果是，搜索类型是什么？从值开始，包含值，值的完全匹配。

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# 代码。繁重的工作就在这里完成。

我不得不寻找一下这个，然后修补它以使其工作。因此，对于其他 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 选择器，您还可以使用 prop 函数（从 jQuery 1.6 开始）。我不记得我正在做的哪个项目，简单地使用有时只有效，当它失败时，我也求助于使用worked，但它导致我同时使用两者。:checked$('#something').is(':checked')$('#something').prop('checked')

在下面的代码片段中，我编写了两个辅助函数和 .该函数返回布尔值 true/false 值;如果检查了参数中传入的输入，则为 true（也使用函数进行检查），如果未检查，则为 false。该函数接受无线电输入并返回已检查输入的值，如果未检查，则返回空字符串。这些帮助程序函数也适用于复选框，而不仅仅是单选按钮。is_checkedget_group_valueis_checkedprop()get_group_valuename

由于该问题没有定义他们何时检索值，因此我为四 （3） 个不同的场景编写了一些侦听器：与任何单选按钮交互时、提交表单时以及单击这些硬编码按钮之一以一次性检索组的值时。

请注意，我使用“click”来标识用户何时与单选输入元素交互，因为“change”永远不会被触发，因为“value”属性在选中与否时不会被更改。我将其用于复选框和单选按钮。

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>

试试这个。 它对我有用

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

J查询

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

  // First load check
  const val = $('input[name="radioName"]').filter(":checked").val();
  alert(val);
});

示例如下： https://codepen.io/abinhho/pen/mdLrqbX