我有两个单选按钮,希望发布所选按钮的值。如何使用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来尝试它的实际操作,看看它是如何工作的。
不停摆弄
其他回答
使用此项:
value = $('input[name=button-name]:checked').val();
使用此。。
$("#myform input[type='radio']:checked").val();
从这个问题中,我提出了一种替代方法,当您在相应标签的单击事件中时,可以访问当前选定的输入。原因是因为新选择的输入直到其标签的单击事件之后才更新。
TL;博士
$('label').click(function() {
var selected = $('#' + $(this).attr('for')).val();
...
});
$(函数){//这完全不能像上面解释的那样正常工作$(“#报告标签”).click(function(){var query=$('input[name=“filter”]:checked').val();var time=(new Date()).toString();$('.query[data-method=“click event”]').html(query+'在'+time);});//这是有效的,但在连续单击同一标签时无法更新$('#报告的输入[name=“filter”]').on('change',function(){var query=$('input[name=“filter”]:checked').val();var time=(new Date()).toString();$('.query[data method=“change event”]').html(查询+'在'+time);});//这是我想出的解决方案$(“#报告标签”).click(function(){var查询=$(“#”+$(this).attr('fr')).val();var time=(new Date()).toString();$('.query[data-method=“click event with this”]').html(query+'at'+time);});});输入[name=“filter”]{显示:无;}#报告的标签{背景色:#ccc;填充:5px;边距:5px;边界半径:5px;光标:指针;}.query查询{填充:5px;边距:5px;}.query:之前{content:“on”attr(数据方法)“:”;}[数据方法=“单击事件”]{颜色:红色;}[数据方法=“更改事件”]{颜色:#cc0;}[数据方法=“单击此事件”]{颜色:绿色;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><form id=“reported”><input type=“radio”name=“filter”id=“question”value=“questions”checked=“checked”><label for=“question”>问题</label><input type=“radio”name=“filter”id=“answer”value=“answers”><label for=“answer”>答案</label><input type=“radio”name=“filter”id=“comment”value=“comments”><label for=“comment”>注释</label><input-type=“radio”name=“filter”id=“user”value=“users”><label for=“user”>用户</label><input type=“radio”name=“filter”id=“company”value=“companies”><label for=“company”>公司</label><div class=“query”data method=“click event”></div><div class=“query”data method=“change event”></div><div class=“query”data method=“click event with this”></div></form>
Try
myForm.myOption.value
函数检查(){console.log(myForm.myOption.value);}<form id=“myForm”><input-type=“radio”name=“myOption”value=“1”>1<br><input-type=“radio”name=“myOption”value=“2”>2<br><input-type=“radio”name=“myOption”value=“3”>3<br></form><button onclick=“check()”>check</button>
下面是我如何填写表格并处理已检查的收音机的获取。
使用名为myForm的表单:
<form id='myForm'>
<input type='radio' name='radio1' class='radio1' value='val1' />
<input type='radio' name='radio1' class='radio1' value='val2' />
...
</form>
从表单中获取值:
$('#myForm .radio1:checked').val();
如果您不发布表单,我会通过以下方式进一步简化:
<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />
然后获取检查值变为:
$('.radio1:checked').val();
在输入上有类名可以让我轻松地设置输入的样式。。。