jquery radio/checkbox change事件不能触发的问题
编程技术 / houtizong 发布于 3年前 156
我想让radio来控制当前我选择的是机动车还是特种车，如下所示：
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <input type="radio" id="insuranceType" name="insuranceType" value="0"/>机动车 <input type="radio" id="insuranceType" name="insuranceType" value="1"/>特种车 <script type="text/javascript"> $(document).ready(function () { $("#insuranceType").change(function () { var insuranceTypeVar = $("input[name='insuranceType']:checked").val(); alert(insuranceTypeVar); }); }); </script> </body> </html>
可结果今我很困惑，只有前一个radio选择时才触发change事件，后才发现因为我是使用的 id 作为筛选器！重复id只能选中第一个！
于是加上一个div，如下所示，一切OK
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="insuranceTypeSelect"> <input type="radio" name="insuranceType" value="0"/>机动车 <input type="radio" name="insuranceType" value="1"/>特种车 </div> <script type="text/javascript"> $(document).ready(function () { $("#insuranceTypeSelect").change(function () { var insuranceTypeVar = $("input[name='insuranceType']:checked").val(); alert(insuranceTypeVar); }); }); </script> </body> </html>
以上还可以优化下，不仅是单击radio圆圈的时候可以选中，单击后边的机动车（特种车）文字的时候，也可以实现radio的选中并触发change事件，如下所示：
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="insuranceTypeSelect"> <input type="radio" id="insuranceType1" name="insuranceType" value="0"/><label for="insuranceType1">机动车</label> <input type="radio" id="insuranceType2" name="insuranceType" value="1"/><label for="insuranceType2">特种车</label> </div> <script type="text/javascript"> $(document).ready(function () { $("#insuranceTypeSelect").change(function () { var insuranceTypeVar = $("input[name='insuranceType']:checked").val(); alert(insuranceTypeVar); }); }); </script> </body> </html>
上一篇：JS控制页面输入框为只读
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
