我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?
我可以得到所有这些:
$("form :radio")
我如何知道选择了哪一个?
我有两个单选按钮,希望发布所选按钮的值。如何使用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>