js控制radio选中、不可选和改变事件实例代码

 更新时间:2023年07月03日 12:05:05   作者:初生的太阳丶  
这篇文章主要给大家介绍了关于js控制radio选中、不可选和改变事件的相关资料,我们经常会遇到js控制radio选中和切换的问题,需要的朋友可以参考下

声明:网上的资料杂七杂八的搞得我一个不熟悉前端的后端开发者弄起来贼难受,现在将实现了的做一个整合,希望能给你们带来点帮助(主要还是帮助我自己(●ˇ∀ˇ●),防止丢失)

html代码组件示例

<div>
	<input type="radio" name="cgmd" value="学习" checked="checked"><span class="cgsySpan">学习</span>
    <input type="radio" name="cgmd" value="探亲"><span class="cgsySpan">探亲</span>
    <input type="radio" name="cgmd" value="商务"><span class="cgsySpan">商务</span>
    <input type="radio" name="cgmd" value="劳务"><span class="cgsySpan">劳务</span>
    <input type="radio" name="cgmd" value="旅行"><span class="cgsySpan">旅行</span>
    <input type="radio" name="cgmd" value="其他"><span>其他</span>
</div>

radio设置选中

var obj = document.getElementsByName("cgmd");//获取组件
for (var i=0;i<obj.length;i++){
	//判断值
   if(obj[i].value == '学习'){
   		//设置选中
        obj[i].checked = true;
    }
}

radio设置不可选

var obj = document.getElementsByName("cgmd");//获取组件
// 设置所有不可选
for (var i=0;i<obj.length;i++){
	obj[i].disabled = true;
}

radio读取某值时选中其他radio变为不可选(用于读取数据时)

var CGMD = '探亲'
var obj = document.getElementsByName("cgmd");//获取组件
for (var i=0;i<obj.length;i++){
	//判断值
   if(obj[i].value == CGMD){
   		//设置选中
        obj[i].checked = true;
    }else{
    	//设置不可选
    	obj[i].disabled= true;
    }
}

radio值发生改变事件

$('input[type=radio][name=cgmd]').change(function() {
	console.log(this.value);
});

总结

到此这篇关于js控制radio选中、不可选和改变事件的文章就介绍到这了,更多相关js控制radio选中事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js 数组克隆方法 小结

    js 数组克隆方法 小结

    在JS中,对于对象类型的变量的引用是通过类似C之类的“指针”的方式来操作的,及如果多个变量引用同一个对象,则任意一个变量对对象的操作都会影响到其它的变量。
    2010-03-03
  • 微信自定义分享链接信息(标题,图片和内容)实现过程详解

    微信自定义分享链接信息(标题,图片和内容)实现过程详解

    这篇文章主要介绍了微信自定义分享链接信息(标题,图片和内容)实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • javascript的创建多行字符串的7种方法

    javascript的创建多行字符串的7种方法

    多行字符串的作用是用来提高源代码的可读性.尤其是当你处理预定义好的较长字符串时,把这种字符串分成多行书写更有助于提高代码的可读性和可维护性.在一些语言中,多行字符串还可以用来做代码注释. 大部分动态脚本语言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?
    2014-04-04
  • 利用JS响应式修改vue实现页面的input值

    利用JS响应式修改vue实现页面的input值

    这篇文章主要给大家介绍了关于如何利用JS响应式修改vue实现页面的input值,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • js 事件的传播机制(实例讲解)

    js 事件的传播机制(实例讲解)

    下面小编就为大家带来一篇js 事件的传播机制(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 使用canvas绘图音乐频谱示例及技术分析

    使用canvas绘图音乐频谱示例及技术分析

    这篇文章主要为大家介绍了使用canvas实现音乐频谱示例及技术分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • 微信小程序学习之自定义滚动弹窗

    微信小程序学习之自定义滚动弹窗

    这篇文章主要给大家介绍了关于微信小程序学习之自定义滚动弹窗的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 基于javascript实现最简单的选项卡切换效果

    基于javascript实现最简单的选项卡切换效果

    这篇文章主要介绍了基于javascript实现最简单的选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JS打字效果的动态菜单代码分享

    JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • js如何实现设计模式中的模板方法

    js如何实现设计模式中的模板方法

    都知道在js中如果定义两个相同名称的方法,前一个方法就会被后一个方法覆盖掉,使用此特点就可以实现模板方法,感兴趣的朋友可以了解下本文哈
    2013-07-07

最新评论