位置:首页 > JavaScript > JavaScript >

js操作radio单选框改变事件 点击radio执行相应操作

字号+ 作者:micloud 来源:www.seoalphas.com 2019-08-08 22:32 浏览量:15094

我们经常看到一些点击选择特效:下拉框或者单选框,选择了不同的值,页面会进行相应的改变,这就是利用了change事件。今天总结的是radio单选框改变事件的原理。

要实现这样的效果,就要获取相应点击事件对应的改变。先看下一个简单的radio表单结构:

<input type="radio" name="sex" value="1" checked> 程序猿
<input type="radio" name="sex" value="2"> 程序媛

要实现点击radio不通知出现不同操作,首先想到的就是要获取这个radio选项:(示例通过jQuery操作,需要先引入jQuery文件)

$('input[type=radio][name=sex]').change();

上面代码不难理解,radio单选也是input的一个属性,通过input的类型type=radio确定是radio单选,再根据name=sex属性来确定是哪个radio。

$('input[type=radio][name=type]').change(function () {
    console.log(this.value)
    if(this.value == 1){
        //自己销售
    }else if(this.value == 2){
        //直销模式
    }
})

上述代码通过this.value获取radio点击项的值,判断是点击了哪个选项,通过判断再执行对应的逻辑代码,就可以实现内容的隐藏显示效果了。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 关于layui富文本编辑器同步编辑器内容到textarea layedit.sync(index)

    关于layui富文本编辑器同步编辑器内容到textarea layedit.sync(index)

    浏览次数:12721

  • JavaScript中对url进行编码:urlencode编码

    JavaScript中对url进行编码:urlencode编码

    浏览次数:11335

  • js清除两个数组相同数据(js两个数组对比 去除相同项得到新数组)

    js清除两个数组相同数据(js两个数组对比 去除相同项得到新数组)

    浏览次数:6171

  • 清除UC手机浏览器强制在页面中加入的关键词链接

    清除UC手机浏览器强制在页面中加入的关键词链接

    浏览次数:5520

网友点评
评论区域