我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?
我可以得到所有这些:
$("form :radio")
我如何知道选择了哪一个?
我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?
我可以得到所有这些:
$("form :radio")
我如何知道选择了哪一个?
当前回答
我编写了一个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来尝试它的实际操作,看看它是如何工作的。
不停摆弄
其他回答
我发布了一个库来帮助解决这个问题。实际上,提取所有可能的输入值,但也包括选中的单选按钮。你可以在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"
}
要获取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>
我使用这个简单的脚本
$('input[name="myRadio"]').on('change', function() {
var radioValue = $('input[name="myRadio"]:checked').val();
alert(radioValue);
});
$(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();
});
})
});
**请尝试以下示例以检查选中的单选按钮**
<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>