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

杉林的HelloWord 2013-03-09

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

相关推荐