我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?
我可以得到所有这些:
$("form :radio")
我如何知道选择了哪一个?
我有两个单选按钮,希望发布所选按钮的值。如何使用jQuery获取值?
我可以得到所有这些:
$("form :radio")
我如何知道选择了哪一个?
当前回答
下面是我如何填写表格并处理已检查的收音机的获取。
使用名为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();
在输入上有类名可以让我轻松地设置输入的样式。。。
其他回答
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>
您可以将:checked选择器与收音机选择器一起使用。
$("form:radio:checked").val();
使用$('input[name=“radioName”]').filter(“:checked”).val();对我来说是最好的方式。
经过测试,这是可行的
Form
<form id="myForm">
<input type="radio" name="radioName" value="Option1"> Option1
<input type="radio" name="radioName" value="Option2" checked> Option2
<input type="radio" name="radioName" value="Option3"> Option3
</form>
滑动分页
$(document).ready(function() {
$('input[name="radioName"]').on('change', function() {
const val = $(this).filter(":checked").val();
alert(val);
})
// First load check
const val = $('input[name="radioName"]').filter(":checked").val();
alert(val);
});
此处示例:https://codepen.io/abinhho/pen/mdLrqbX
此解决方案不需要jQuery。
const RADIO_NAME = "radioName";
const radios = Array.from(document.getElementsByName(RADIO_NAME));
const checkedRadio = radios.filter(e=>e.checked);
这使用jQuery:
const radios = Array.from($(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked);
jQuery添加了这里不需要的额外抽象层。
您还可以使用:
const radios = Array.from(document.querySelectorAll(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked)[0];
但getElementsByName足够简单明了。
要获取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>