js controls radio selection, non-selection and change events

Disclaimer: The miscellaneous information on the Internet made me, a back-end developer who is not familiar with the front-end, very uncomfortable. Now I will integrate the realized ones, hoping to bring some help to you (mainly to help myself (●ˇ ∀ˇ●), to prevent loss)

html code component example

<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 settings selected

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

radio setting is not selectable

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

When the radio reads a certain value, selecting other radios becomes unavailable (for reading data)

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 value change event

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

Guess you like

Origin blog.csdn.net/Strive279/article/details/129421628