html的＜input type='radio'/＞change事件坑

一、坑复现

<div><input type='radio' name='test' value='1' checked/>1<span id='test_a'>a test </span ></div>
<div><input type='radio' name='test' value='2'/>2<span id='test_b'>b test </span ></div>

$('name="test"').on('change',function(){
      if(+this.value==1){
          $('#test_a').css('color','red');
      }else{
          $('#test_a').css('color','blue');
      } 
      if(+this.value==2){
          $('#test_b').css('color','red');
      }else{
          $('#test_b').css('color','blue');
      } 
}).change();

结果：a test显示蓝色，b test显示蓝色

二、分析原因

默认情况下change的匿名方法执行两次，而在点击radio按钮的时候change的匿名方法执行一次。

$('name="test"')中被选中的元素才触发change事件，而$('name="test"').change()把所有$('name="test"')元素都触发change事件。