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事件。

html的＜input type='radio'/＞change事件坑相关推荐

input type=file change事件只触发一次
javascript 中onchange事件: 当对象的值发生改变的时候才会触发; 即input中value值变化才会触发如要上传两次,清除文件输入值转载于:https://www.cnblogs ...
单选按钮input[type=radio]，加上disabled后按钮颜色失效，始终默认为灰色
在前端使用单选按钮input[type=radio]时,渲染后台数据时将单选按钮设为不可修改,给input加上disabled后,按钮颜色变灰,且通过css修改样式也无法改变. 通过百度尝试了类似以下 ...
input[type=checkbox] ; input[type=radio] 改变默认样式
/*改变checkbox 默认样式*/input[type="checkbox"] { -webkit-appearance: none; /*清除复选框默认样式*/ height ...
点击文字，把input type=radio也选中
本文原文地址:https://my.oschina.net/jack088/blog/469815 1. <label> <input type="radio" ...
css3修改input[type=radio]样式
在项目中经常,需要使用单选按钮input[type=radio],但是浏览器的默认样式可能与我们需要实现的样式差距很大,可以使用css3来实现想要达到的效果: <!DOCTYPE html> ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
input[type=radio]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...
input[type='radio'] 自定义样式___通过label标签重置input[radio]样式
每次都要重新写一遍,麻烦,所以直接写一个完整小栗子,可直接复制粘贴再修改一哈哈,这样就省事多了. 先给label标签绑定input,如此便可以,点击input或者label中包裹的文字时,都可以被选中 ...
input type=“radio“默认按钮选中状态
html: <input id="Radio1" type="radio" value="男" name="st_Sex&q ...

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

一、坑复现

二、分析原因

html的＜input type='radio'/＞change事件坑相关推荐

最新文章

热门文章