我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?

我可以得到所有这些:

$("form :radio")

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


当前回答

除了CSS选择器:checked之外,您还可以使用prop函数(从jQuery1.6开始)。我不记得我在做什么项目,其中只使用$(“#something”).is(“:checked”)有时有效,当它失败时,我也会使用$(‘#somethink’).prop(‘checked’),但这导致我同时使用两者。

在下面的代码片段中,我编写了两个助手函数,is_checked和get_group_value。函数is_checked返回布尔值true/false;如果在参数中传递的输入被检查(也用prop()函数检查),则为true;如果未检查,则为false。函数get_group_value获取无线电输入的名称,并返回选中的值,如果未选中,则返回空字符串。这些助手函数还可以使用复选框,而不仅仅是单选按钮。

由于问题没有定义他们何时检索值,我为四(3)种不同的场景编写了一些听众:与任何单选按钮交互时、提交表单时,以及单击这些硬编码按钮之一一次性检索组值时。

请注意,我使用“单击”来标识用户何时与无线电输入元素交互,因为“更改”永远不会被触发,因为“值”属性在选中或未选中时不会被更改。我将此用于复选框和单选按钮。

函数已检查(输入){var$input=$(输入);return$input.is(':checked')||$input.prop('checked')//返回布尔值。如果选中,则为True,否则为false。}函数get_group_value(组名){var$inputs=$('[name=“'+group_name+'”]:选中');if($inputs.length){return$inputs.first().val();}//如果存在,返回找到的第一个值返回“”//如果不存在,则不返回任何内容}$('form').on('submit',函数(e){e.预防违约();var$form=$(this),结果={};$form.find('input[type=radio]').each(function(){var$input=$(this);if(is checked(this)){结果[$input.attr('name')]=$input.val();}});console.info('表单结果',结果);});$('form input[type=radio]').on('click',函数(e){var组名=$(this).attr('name');console.info('单选按钮单击',group_name,get_group_value(group_name));});$('按钮.单选按钮').on('单击',功能(e){var组名=$(this).attr('id');console.info('Button Click',group_name,get_group_value(group_name));});.我的测试{背景:#ffffff;颜色:#000000;填充:16px;}表单{填充:8px;边框:1px实心#999999;}字段集{边框:无;}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><div class=“我的测试”><表单>第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>第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”>提交</button></form><p>按下此按钮只获取第一组的值:<button class=“radio button”id=“example-1”>Foo or Bar</按钮></p><p>按下此按钮只获取第二组的值:<button class=“radio button”id=“example-2”>香蕉还是苹果</按钮></p></div>

其他回答

试试这个。这对我有用

$('input[type="radio"][name="name"]:checked').val();
$("input:radio:checked").val();
$(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();
    });
  })
});

要获取id为myForm的表单的选定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>选择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>

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>