JavaScript 控制 Radio 单选框的选中、禁用与事件监听

作者:像素猫时间:2026-10-30 21:22:10浏览:660

本文整合了JavaScript操作Radio单选框的核心功能,包括根据值设置选中状态、批量禁用选项以限制用户交互,以及在读取数据时保持特定选项选中并禁用其余项。同时提供了监听Radio值改变事件的jQuery实现方案,帮助后端开发者快速掌握前端表单控制技巧。

Radio控件控制概述

对于不熟悉前端开发的后端工程师而言,网络上关于Radio控件控制的资料往往杂乱无章,导致实现过程充满阻碍。为了便于查阅并防止技术细节遗失,本文将经过验证的实现方案进行系统化整理,旨在为有类似需求的开发者提供清晰的参考。

HTML结构定义

首先定义HTML结构,创建一组名称为“cgmd”的单选按钮,分别对应“学习”、“探亲”、“商务”、“劳务”、“旅行”及“其他”等选项,其中“学习”项默认处于选中状态。

<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选中状态

在JavaScript中,可以通过 document.getElementsByName 方法获取指定名称的所有Radio元素集合。遍历该集合,比对每个元素的 value 属性与目标值,若匹配则将 checked 属性设为 true,即可实现指定项的选中效果。

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

禁用Radio选项

若需将所有Radio选项设置为不可选状态,同样通过 getElementsByName 获取元素集合后,遍历每个元素并将其 disabled 属性设置为 true。这将禁用所有单选按钮的用户交互功能。

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

数据读取时的选中与禁用逻辑

在读取数据场景下,可能需要固定显示某一项为选中状态,同时禁用其他选项以防止修改。实现逻辑为:遍历Radio集合,若当前项的 value 等于目标值(如“探亲”),则设置 checked 为 true;否则,将 disabled 设为 true,从而锁定其他选项。

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值改变事件

监听Radio值改变事件可使用jQuery简化操作。通过选择器 $('input[type=radio][name=cgmd]') 绑定 change 事件处理函数,当用户切换选中项时,可通过 this.value 获取当前选中的值并执行后续逻辑(如打印日志)。

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

总结

综上所述,通过原生JavaScript操作DOM属性可以灵活控制Radio的选中与禁用状态,而结合jQuery的事件监听机制则能更便捷地响应值变化。这些基础操作构成了前端表单交互的核心部分,适用于多种数据录入与展示场景。

本文介绍了JavaScript控制Radio选中、禁用及事件监听的完整示例。如需了解更多相关前端技术细节,建议参考本站往期文章或继续浏览后续内容,感谢支持。

作者最新文章