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,javascript,html,前端)