问题陈述很简单。我需要查看用户是否从单选组中选择了单选按钮。组中的每个单选按钮共享相同的 ID。
问题是我无法控制表单的生成方式。以下是单选按钮控件代码的示例代码:
<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >
In addition to this when a radio button is selected it doesn't add a "checked" attribute to the control just text checked (I guess just the property checked without a value).以下是所选无线电控件的外观
<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >
任何人都可以帮助我使用 jQuery 代码来帮助我获得选中单选按钮的值吗?
就用吧。
$('input[name="name_of_your_radiobutton"]:checked').val();
就这么容易。
首先,您不能有多个具有相同 id 的元素。我知道您说过您无法控制表单的创建方式,但是...尝试以某种方式从无线电中删除所有 ID,或使它们独一无二。
要获取所选单选按钮的值,请使用 :checked
过滤器按名称选择它。
var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
selectedVal = selected.val();
}
编辑
因此,您无法控制名称。在这种情况下,我会说将这些单选按钮都放在一个名为 radioDiv
的 div 中,然后稍微修改您的选择器:
var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
selectedVal = selected.val();
}
获取所选单选按钮值的最简单方法如下:
$("input[name='optradio']:checked").val();
选择器之间不应使用空格。
$("#radioID") // select the radio by its id
.change(function(){ // bind a function to the change event
if( $(this).is(":checked") ){ // check if the radio is checked
var val = $(this).val(); // retrieve the value
}
});
确保将其包装在 DOM 就绪函数($(function(){...});
或 $(document).ready(function(){...});
)中。
radioID
更改为其 ID?
在您的代码中,jQuery 只查找名称为 q12_3 的输入的第一个实例,在本例中其值为 1。您需要名称为 q12_3 的输入,即 :checked。
$(function(){
$("#submit").click(function() {
alert($("input[name=q12_3]:checked").val());
});
});
请注意,上面的代码与使用 .is(":checked") 不同。 jQuery 的 is() 函数返回一个布尔值(真或假)而不是一个元素。
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>
这将返回选中的单选按钮值。
if($("input[type='radio'].radioBtnClass").is(':checked')) {
var card_type = $("input[type='radio'].radioBtnClass:checked").val();
alert(card_type);
}
我的博客中的更多详细信息:https://webexplorar.com/jquery-get-selected-radio-button-value/
$("input[name='gender']:checked").val()
对于嵌套属性
$("input[name='lead[gender]']:checked").val()
不要忘记名字的单括号
获取所有收音机:
var radios = $("input[type='radio']");
过滤以获取已检查的内容
radios.filter(":checked");
或者
找到单选按钮值的另一种方法
var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();
$('[name=your_inputs_names]:checked').val()
因为它们总是具有相同的唯一名称
.filter()
.filter()
。我希望这个答案可以在顶部。
要获取所选单选按钮的值,请使用 RadioButtonName 和包含单选按钮的表单 ID。
$('input[name=radioName]:checked', '#myForm').val()
或仅
$('form input[type=radio]:checked').val();
此代码有效。
var radioValue = $("input[name='gender']:checked").val();
检查它工作正常的例子
<div class="dtl_radio">
Metal purity :
<label>
<input type="radio" name="purityradio" class="gold_color" value="92" checked="">
92 %
</label>
<label>
<input type="radio" name="purityradio" class="gold_color" value="75">
75 %
</label>
<label>
<input type="radio" name="purityradio" class="gold_color" value="58.5">
58.5 %
</label>
<label>
<input type="radio" name="purityradio" class="gold_color" value="95">
95 %
</label>
<label>
<input type="radio" name="purityradio" class="gold_color" value="59">
59 %
</label>
<label>
<input type="radio" name="purityradio" class="gold_color" value="76">
76 %
</label>
<label>
<input type="radio" name="purityradio" class="gold_color" value="93">
93 %
</label>
</div>
var check_value = $('.gold_color:checked').val();
使用下面的代码
$('input[name=your_radio_button_name]:checked').val();
请注意,应该定义 value 属性,以便在结果中获得“Male”或“Female”。
<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>
请参阅下面的工作示例,其中包含一组无线电组,每个组与不同的部分相关联。您的命名方案很重要,但理想情况下,您应该尝试对输入使用一致的命名方案(尤其是当它们位于此处这样的部分中时)。
$('#submit').click(function(){ var section = $('input:radio[name="sec_num"]:checked').val(); var question = $('input:radio[name ="qst_num"]:checked').val(); var selectedVal = checkVal(section, question); $('#show_val_div').text(selectedVal); $('#show_val_div').show(); } ); function checkVal(section, question) { var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || “未选择”;返回值; } * { 边距:0; } div { 边距底部:20px;填充:10px; } h5,标签 { 显示:内联块; } .small { 字体大小:12px; } .hide { 显示:无; } #formDiv { 填充:10px;边框:1px纯黑色; } .center { 显示:块;边距:0 自动;文本对齐:居中; }
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
// do something
checked
时,为什么还要麻烦与 undefined
进行字符串比较? jQuery 中不需要。
"undefined"
的比较是不必要的。
用例子试试这个
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1 /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>
<script>
$(document).ready(function () {
$('#myForm').on('click', function () {
var value = $("[name=radio]:checked").val();
alert(value);
})
});
</script>
仅按名称
$(function () {
$('input[name="EventType"]:radio').change(function () {
alert($("input[name='EventType']:checked").val());
});
});
您可以在 javascript/jQuery 中使用此 ID 通过 Id 获取所选单选按钮的值。
$("#InvCopyRadio:checked").val();
我希望这将有所帮助。
我知道我加入这么晚了。但值得一提的是,它需要
<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>
然后我在我的js中检查了这个。它可能就像
$(document).ready(function () {
$("#MyRadioBtnOuterDiv").click(function(){
var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
if(radioValue === "myRadioBtnName"){
$('#showMyRadioArea').show();
}else if(radioValue === "yourRadioBtnName"){
$('#showYourRadioArea').show();
}
});
});
`
这是获取选定单选按钮值的较短版本
var value = $(":radio:checked").val()
解释这个简单主题的最佳方法是提供简单的示例和参考链接:-
在以下示例中,我们有两个单选按钮。如果用户选择任何单选按钮,我们将在警报框中显示选定的单选按钮值。
html:
<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>
jQuery: -
$(document).ready(function(){
$('#Demo input').on('change', function() {
alert($('input[name="Gender"]:checked', '#Demo').val());
});
});
<div id="subscriptions">
Company Suscription: <input type="radio" name="subsrad" value="1">
Customer Subscription:<input type="radio" name="subsrad" value="2">
Manully Set:<input type="radio" name="subsrad" value="MANUAL">
NO Subscription:<input type="radio" name="subsrad" value="0">
</div>
并处理 jquery 以获取关于值集/通过 div id 更改的警报:
$("#subscriptions input") // select the radio by its id
.on('change', function(){ // bind a function to the change event
alert($('input[name="subsrad"]:checked', '#subscriptions').val());
});
这很容易......:-}
我不是 javascript 人,但我发现这里是为了搜索这个问题。对于谁谷歌它并在这里找到,我希望这会有所帮助。因此,如果我们有一个单选按钮列表,则有问题:
<div class="list">
<input type="radio" name="b1" value="1">
<input type="radio" name="b2" value="2" checked="checked">
<input type="radio" name="b3" value="3">
</div>
我可以找到使用此选择器选择的那个:
$('.list input[type="radio"]:checked:first').val();
即使没有选择任何元素,我仍然没有得到未定义的错误。因此,您不必在获取元素的值之前编写额外的 if 语句。
这是非常基本的jsfiddle example。
另一种简单的理解方式......它正在工作:
HTML 代码:
<input type="radio" name="active_status" class="active_status" value="Hold">Hold
<input type="radio" name="active_status" class="active_status" value="Cancel">Cancel
<input type="radio" name="active_status" class="active_status" value="Suspend">Suspend
jQuery代码:
$(document).on("click", ".active_status", function () {
var a = $('input[name=active_status]:checked').val();
(OR)
var a = $('.active_status:checked').val();
alert(a);
});
多组单选按钮将值转换为数组
var arr = []; function r(n) { var section = $('input:radio[name="' + n + '"]:checked').val(); arr[n] = 部分; console.log(arr) } 1 2 3
4 5 6
正如其他答案所建议的那样,即使是 input
也不是必需的。也可以使用以下代码:
var variable_name = $("[name='radio_name']:checked").val();
input
和不必要的引号。
这里有 2 个单选按钮,即 rd1 和 Radio1
<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" />
通过检查单个 is(":checked") 属性来检查选中哪个单选按钮的最简单方法
if ($("#rd1").is(":checked")) {
alert("rd1 checked");
}
else {
alert("rd1 not checked");
}
HTML 标记:
<div class="form-group">
<input id="rdMale" type="radio" class="clsGender" value="Male" name="rdGender" /> Male
<input id="rdFemale" type="radio" class="clsGender" value="Female" name="rdGender" /> Female
</div>
通过单选按钮 ID 获取所选值:
$("input[name='rdGender']").click(function () {
alert($("#rdMale").val());
});
通过单选按钮类名获取值
$(".clsGender").click(function () {
alert($(this).val());
//or
alert($(".clsGender:checked").val());
});
按名称获取值
$("input[name='rdGender']").click(function () {
var rdVaule = $("input[name='rdGender']:checked").val();
alert(rdVaule);
});
对于多个单选按钮,您必须在单选按钮标签上放置相同的名称属性。例如;
<input type="radio" name"gender" class="select_gender" value="male">
<input type="radio" name"gender" class="select_gender" value="female">
一旦你有了单选选项,现在你可以像下面这样执行 jQuery 代码来获取选中/选中单选选项的值。
$(document).on("change", ".select_gender", function () {
console.log($(this).val()); // Here you will get the current selected/checked radio option value
});
注意:使用 $(document) 是因为如果单选按钮是在 DOM 100% 加载后创建的,那么你需要它,因为如果你不使用 $(document) 那么 jQuery 将不知道新创建的单选按钮的范围。像这样进行 jQuery 事件调用是一个好习惯。
<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >
$(function() {
$("#submit").click(function() {
alert($('input[name=s_2_1_6_0]:checked').val());
});
});`
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />
Javascript Code
$("input[type='radio'].check").click(function() {
if($(this).is(':checked')) {
if ($(this).val() == 1) {
$("#submit").val("Verified & Save");
}else{
$("#submit").val("Save");
}
}
});
null
,这是合乎逻辑的,但当您习惯于通过.val()
调用将""
视为默认值时,有时会使您感到困惑。