当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery radio/checkbox change事件不能触发的问题

发表于: 2013-03-09   作者:bijian1013   来源:转载   浏览:
摘要: 我想让radio来控制当前我选择的是机动车还是特种车,如下所示:  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><

我想让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>

 

jquery radio/checkbox change事件不能触发的问题

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
为了兼容ie FF chrome等主流浏览器,对事件部分作了修改: radio的赋值和事件操作 // 绑定radio单击
人生还在继续,只有不断补充以前所不懂的知识,今天练习一个jQuery的事件change。这个事件是在对象
实例 当输入域发生变化时改变其颜色: $(".field").change(function(){ $(this).css("background-co
Snandy Stop, thinking is the essence of progress. 读jQuery之十四(触发事件核心方法) 触发事件
第一部分 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")
jQuery 中 click事件会累计绑定 例如下列代码: aNode.click(function(){   bNode.click(function
日期:2013-4-14 来源:GBin1.com 在线演示 iCheckbox是一个超棒的界面美化Javascript类库。 主要特
在线演示 iCheckbox是一个超棒的界面美化Javascript类库。 主要特性 跨浏览器和设备统一的input样式
日期:2013-4-14 来源:GBin1.com 在线演示 iCheckbox是一个超棒的界面美化Javascript类库。 主要特
Radio 1.获取选中值,三种方法都可以: $('input:radio:checked').val(); $("input[type='radio']:
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号