快捷導(dǎo)航

js控制radio選中、不可選和改變事件實(shí)例代碼

更新時(shí)間：2023年07月03日 12:05:05 作者：初生的太陽(yáng)丶

這篇文章主要給大家介紹了關(guān)于js控制radio選中、不可選和改變事件的相關(guān)資料,我們經(jīng)常會(huì)遇到j(luò)s控制radio選中和切換的問(wèn)題,需要的朋友可以參考下

聲明：網(wǎng)上的資料雜七雜八的搞得我一個(gè)不熟悉前端的后端開發(fā)者弄起來(lái)賊難受，現(xiàn)在將實(shí)現(xiàn)了的做一個(gè)整合，希望能給你們帶來(lái)點(diǎn)幫助（主要還是幫助我自己(●ˇ∀ˇ●)，防止丟失）

html代碼組件示例

<div>
	<input type="radio" name="cgmd" value="學(xué)習(xí)" checked="checked"><span class="cgsySpan">學(xué)習(xí)</span>
    <input type="radio" name="cgmd" value="探親"><span class="cgsySpan">探親</span>
    <input type="radio" name="cgmd" value="商務(wù)"><span class="cgsySpan">商務(wù)</span>
    <input type="radio" name="cgmd" value="勞務(wù)"><span class="cgsySpan">勞務(wù)</span>
    <input type="radio" name="cgmd" value="旅行"><span class="cgsySpan">旅行</span>
    <input type="radio" name="cgmd" value="其他"><span>其他</span>
</div>

radio設(shè)置選中

var obj = document.getElementsByName("cgmd");//獲取組件
for (var i=0;i<obj.length;i++){
	//判斷值
   if(obj[i].value == '學(xué)習(xí)'){
   		//設(shè)置選中
        obj[i].checked = true;
    }
}

radio設(shè)置不可選

var obj = document.getElementsByName("cgmd");//獲取組件
// 設(shè)置所有不可選
for (var i=0;i<obj.length;i++){
	obj[i].disabled = true;
}

radio讀取某值時(shí)選中其他radio變?yōu)椴豢蛇x(用于讀取數(shù)據(jù)時(shí))

var CGMD = '探親'
var obj = document.getElementsByName("cgmd");//獲取組件
for (var i=0;i<obj.length;i++){
	//判斷值
   if(obj[i].value == CGMD){
   		//設(shè)置選中
        obj[i].checked = true;
    }else{
    	//設(shè)置不可選
    	obj[i].disabled= true;
    }
}

radio值發(fā)生改變事件

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

總結(jié)

到此這篇關(guān)于js控制radio選中、不可選和改變事件的文章就介紹到這了,更多相關(guān)js控制radio選中事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js Dialog 實(shí)踐分享
在我們的WebApp項(xiàng)目中，Dialog是個(gè)不可或缺的元素，很多頁(yè)面操作都通過(guò)Dialog來(lái)進(jìn)行，今天我們就Dialog顯示數(shù)據(jù)、提交數(shù)據(jù)做進(jìn)一步分析
2012-10-10
jQuery實(shí)現(xiàn)手風(fēng)琴特效
這篇文章主要為大家詳細(xì)介紹了前端js實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
淺談幾種常用的JS類定義方法
下面小編就為大家?guī)?lái)一篇淺談幾種常用的JS類定義方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
echarts統(tǒng)計(jì)x軸區(qū)間的數(shù)值實(shí)例代碼詳解
這篇文章主要介紹了echarts統(tǒng)計(jì)x軸區(qū)間的數(shù)值,本文給出了實(shí)現(xiàn)實(shí)例及實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
javascript使用shift+click實(shí)現(xiàn)選擇和反選checkbox的方法
這篇文章主要介紹了javascript使用shift+click實(shí)現(xiàn)選擇和反選checkbox的方法,涉及javascript針對(duì)鍵盤按鍵的判斷及checkbox的操作技巧,需要的朋友可以參考下
2015-05-05
全面解析多種Bootstrap圖片輪播效果
這篇文章主要為大家全面解析多種Bootstrap圖片輪播效果，感興趣的小伙伴們可以參考一下
2016-05-05
js 數(shù)字、字符串、布爾值的轉(zhuǎn)換方法(必看)
下面小編就為大家?guī)?lái)一篇js 數(shù)字、字符串、布爾值的轉(zhuǎn)換方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )
javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )...
2007-03-03
JavaScript設(shè)計(jì)模式經(jīng)典之工廠模式
工廠模式定義一個(gè)用于創(chuàng)建對(duì)象的接口，這個(gè)接口由子類決定實(shí)例化哪一個(gè)類。接下來(lái)通過(guò)本文給大家介紹JavaScript設(shè)計(jì)模式經(jīng)典之工廠模式，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
JavaScript三元表達(dá)式示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript三元表達(dá)式的相關(guān)資料,三元運(yùn)算符是JavaScript僅有的使用三個(gè)操作數(shù)的運(yùn)算符,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02