js控制radio選中、不可選和改變事件實(shí)例代碼
更新時(shí)間：2023年07月03日 12:05:05 作者：初生的太陽丶
這篇文章主要給大家介紹了關(guān)于js控制radio選中、不可選和改變事件的相關(guān)資料,我們經(jīng)常會(huì)遇到j(luò)s控制radio選中和切換的問題,需要的朋友可以參考下
聲明：網(wǎng)上的資料雜七雜八的搞得我一個(gè)不熟悉前端的后端開發(fā)者弄起來賊難受，現(xiàn)在將實(shí)現(xiàn)了的做一個(gè)整合，希望能給你們帶來點(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)文章
在我們的WebApp項(xiàng)目中，Dialog是個(gè)不可或缺的元素，很多頁面操作都通過Dialog來進(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
下面小編就為大家?guī)硪黄獪\談幾種常用的JS類定義方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧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圖片輪播效果，感興趣的小伙伴們可以參考一下2016-05-05
js 數(shù)字、字符串、布爾值的轉(zhuǎn)換方法(必看)
下面小編就為大家?guī)硪黄猨s 數(shù)字、字符串、布爾值的轉(zhuǎn)換方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧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è)類。接下來通過本文給大家介紹JavaScript設(shè)計(jì)模式經(jīng)典之工廠模式，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要給大家介紹了關(guān)于JavaScript三元表達(dá)式的相關(guān)資料,三元運(yùn)算符是JavaScript僅有的使用三個(gè)操作數(shù)的運(yùn)算符,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02