Javascript 单选按钮上的 onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39571634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onchange event on radio button
提问by user3889963
I am trying to achieve something simple. Basically I have 3 radio groups and onchange of either one of those group, I want to get the values of all the radio groups and display on an alert box.
我正在努力实现一些简单的东西。基本上我有 3 个无线电组和其中一个组的 onchange，我想获取所有无线电组的值并显示在警报框中。
My code is as follows
我的代码如下
html
html
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
js
js
$("input[type=radio]").on("change",function(){
var ac=$("input[type=radio][name=ac]").val();
var tier=$("input[type=radio][name=tier]").val();
var cap=$("input[type=radio][name=cap]").val();
alert(ac+" "+tier+" "+cap);
});
I have a jsfiddle here too https://jsfiddle.net/5fg6by8m/
我这里也有一个 jsfiddle https://jsfiddle.net/5fg6by8m/
ON the fiddle, it seems like the event doesn't fire at all, while on my localhost server using mozilla to browse I always get the values of the first items of each group in my alert box (yes normal big). I might be doing some silly mistake. Please help me correct this.
在小提琴上，似乎事件根本没有触发，而在我使用 mozilla 浏览的本地主机服务器上，我总是在我的警报框中获取每个组的第一个项目的值（是的，正常大）。我可能正在犯一些愚蠢的错误。请帮我纠正这个问题。
Thanks in advance...
提前致谢...
edit corrected fiddle https://jsfiddle.net/5fg6by8m/4/
编辑更正小提琴 https://jsfiddle.net/5fg6by8m/4/
回答by Haresh Vidja
You can use below code. you have to use :checkedpsudo selector
您可以使用以下代码。你必须使用:checked伪选择器
$(document).on("change","input[type=radio]",function(){
var ac=$('[name="ac"]:checked').val();
var tier= $('[name="tier"]:checked').length>0? $('[name="tier"]:checked').val():"";
var cap=$('[name="cap"]:checked').length>0 ?$('[name="cap"]:checked').val():"";
alert(ac+" "+tier+" "+cap);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small回答by Chanaka Caldera
refer the working demo, this will help to you.
参考工作演示，这将对您有所帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div class="main">
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
</div>
<script type="text/javascript">
$(document).ready(function(){
$("div.main input[type=radio]").on('change',function(){
var thelength = $("div.main input[type=radio]").length;
//alert(thelength);
for(var i=0;i<thelength;i++)
{
var theValueofCheck = $("div.main input[type=radio]").eq(i).val();
alert(theValueofCheck);
}
});
});
</script>
</body>
</html>回答by landsman
Check this:
检查这个：
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
JS:
JS：
jQuery( function( $ ) {
function recalc()
{
var ac = $("input[name=ac]").val();
var tier = $("input[name=tier]").val();
var cap = $("input[name=capacity]").val();
alert(ac+""+tier+""+cap);
}
$(document).ready(function(){
$("input[type=radio]").on("change",function(){
recalc();
});
});
});
回答by Nhan
Shorter solution, select all checked buttons using input:checkedand jQuery .each()
更短的解决方案，使用input:checkedjQuery选择所有选中的按钮.each()
$(document).ready(function() {
$("input[type=radio]").on("change", function() {
var results = "";
$("input:checked").each(function(key, val) {
results += $(val).val() + "<br>";
});
$(".results").html(results);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
<div class="results"></div>回答by sheetal
You didn't have selected framework in jsfiddle, so please select jquery in jsfiddle then run the code.
您没有在jsfiddle中选择框架，所以请在jsfiddle中选择jquery然后运行代码。
回答by Shrinivas Pai
Added :checkedin your JScode
:checked在您的JS代码中添加
$(document).ready(function(){
$("input[type=radio]").on("change",function(){
var ac=$("input[type=radio][name=ac]:checked").val();
var tier=$("input[type=radio][name=tier]:checked").val();
var cap=$("input[type=radio][name=capacity]:checked").val();
alert(ac+" "+tier+" "+cap);
});
});
