JS實現(xiàn)checkbox互斥(單選)功能示例
更新時間：2019年05月04日 11:05:40 作者：十二分努力
這篇文章主要介紹了JS實現(xiàn)checkbox互斥(單選)功能,涉及JavaScript針對頁面元素屬性的判斷及動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)checkbox互斥(單選)功能。分享給大家供大家參考，具體如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>www.fzitv.net CheckBox單選</title>
<script language="javascript">
function sel1(obj){
if(obj.checked){
//如果當前項被選中了
document.all.chk2.checked=false
//則不能選擇第二組
document.all.sel1.selectedIndex=4
//指定下拉框中選擇的項
}
}
function sel2(obj){
if(obj.checked){
//如果當前項被選中了
document.all.chk1.checked=false
//則不能選擇第一組
document.all.sel1.selectedIndex=0
//指定下拉框中選擇的項
}
}
</script>
</head>
<body>
<p>A組
<input type="checkbox" name="checkbox"
value="checkbox" id="chk1" onClick="sel1(this)">
</p>
<p>B組
<input type="checkbox" name="checkbox2"
value="checkbox" id="chk2" onClick="sel2(this)">
</p>
<p>C
<select name="select" id="sel1">
<option selected="selected">個人</option>
<option>200米</option>
<option>400米</option>
<option>800米</option>
<option>200米接力</option>
</select>
</p>
</body>
</html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)限定范圍拖拽的示例，幫助大家更好的制作js特效，美化自己的網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
JavaScript創(chuàng)建對象的七種方式(推薦)
JavaScript創(chuàng)建對象的方式有很多，通過Object構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個對象，顯然這兩種方式會產(chǎn)生大量的重復代碼，并不適合量產(chǎn)。接下來介紹七種非常經(jīng)典的創(chuàng)建對象的方式，他們也各有優(yōu)缺點2017-06-06
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點的問題，在IE中nextSibling不會返回文本節(jié)點，而chrome或者firefox等會返回文本節(jié)點2014-05-05
淺談js繼承的實現(xiàn)及公有、私有、靜態(tài)方法的書寫
下面小編就為大家?guī)硪黄獪\談js繼承的實現(xiàn)及公有、私有、靜態(tài)方法的書寫。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了原生JS實現(xiàn)不斷變化的標簽，可以上下浮動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
H5基于iScroll實現(xiàn)下拉刷新和上拉加載更多
這篇文章主要為大家詳細介紹了H5基于iScroll實現(xiàn)下拉刷新和上拉加載更多效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
微信小程序使用request網(wǎng)絡(luò)請求操作實例
這篇文章主要介紹了微信小程序使用request網(wǎng)絡(luò)請求操作,結(jié)合實例形式分析了wx.request(object)網(wǎng)絡(luò)請求操作的具體使用技巧,需要的朋友可以參考下2017-12-12
javascript foreach中如何獲取數(shù)組下標/index
這篇文章主要介紹了javascript foreach中如何獲取數(shù)組下標/index問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
JavaScript實現(xiàn)網(wǎng)頁tab欄效果制作
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁tab欄效果制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文主要介紹了拖動時防止選中的小知識點。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02