我有两个单选按钮,希望发布所选按钮的值。如何使用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>
其他回答
我编写了一个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来尝试它的实际操作,看看它是如何工作的。
不停摆弄
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>
要检索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"
}
$(".Stat").click(function () {
var rdbVal1 = $("input[name$=S]:checked").val();
}