问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

单选按钮上的 onchange 事件

社区维基
1
新手上路，请多包涵

我正在努力实现一些简单的事情。基本上我有 3 个无线电组和其中任何一个组的 onchange，我想获取所有无线电组的值并显示在警告框中。

我的代码如下

网页格式

<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

 $("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);
});

我这里也有一个 jsfiddle https://jsfiddle.net/5fg6by8m/

在小提琴上，似乎事件根本没有触发，而在我使用 mozilla 浏览的本地主机服务器上，我总是在我的警告框中获取每个组的第一个项目的值（是的，正常大）。我可能犯了一些愚蠢的错误。请帮我纠正这个。

提前致谢…

编辑更正后的小提琴 https://jsfiddle.net/5fg6by8m/4/

原文由 user3889963 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlonchange
阅读 495
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您可以使用以下代码。你必须使用 :checked psudo 选择器

 $(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

原文由 Haresh Vidja 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

参考工作演示，这将对您有所帮助。

 <!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>

原文由 caldera.sac 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题