我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?
我可以得到所有这些:
$("form :radio")
我如何知道选择了哪一个?
我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?
我可以得到所有这些:
$("form :radio")
我如何知道选择了哪一个?
当前回答
**请尝试以下示例以检查选中的单选按钮**
<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>
其他回答
$(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();
});
})
});
我编写了一个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来尝试它的实际操作,看看它是如何工作的。
不停摆弄
除了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>
演示:https://jsfiddle.net/ipsjolly/xygr065w/
$(函数){$(“#submit”).click(function(){alert($('input:radio:checked').val());});});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><表><tr><td>促销活动</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”>提交</button>
要获取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>