快捷導(dǎo)航

JS實(shí)現(xiàn)checkbox互斥(單選)功能示例

更新時間：2019年05月04日 11:05:40 作者：十二分努力

這篇文章主要介紹了JS實(shí)現(xiàn)checkbox互斥(單選)功能,涉及JavaScript針對頁面元素屬性的判斷及動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)checkbox互斥(單選)功能。分享給大家供大家參考，具體如下：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>m.fzitv.net CheckBox單選</title>
<script language="javascript">
function sel1(obj){
  if(obj.checked){
//如果當(dāng)前項被選中了
   document.all.chk2.checked=false
//則不能選擇第二組
  document.all.sel1.selectedIndex=4
//指定下拉框中選擇的項
  }
}
function sel2(obj){
  if(obj.checked){
//如果當(dāng)前項被選中了
  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代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(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實(shí)現(xiàn)限定范圍拖拽的示例
這篇文章主要介紹了js實(shí)現(xiàn)限定范圍拖拽的示例，幫助大家更好的制作js特效，美化自己的網(wǎng)頁，感興趣的朋友可以了解下
2020-10-10
JavaScript創(chuàng)建對象的七種方式(推薦)
JavaScript創(chuàng)建對象的方式有很多，通過Object構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個對象，顯然這兩種方式會產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。接下來介紹七種非常經(jīng)典的創(chuàng)建對象的方式，他們也各有優(yōu)缺點(diǎn)
2017-06-06
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點(diǎn)的問題，在IE中nextSibling不會返回文本節(jié)點(diǎn)，而chrome或者firefox等會返回文本節(jié)點(diǎn)
2014-05-05
淺談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書寫
下面小編就為大家?guī)硪黄獪\談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書寫。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
原生JS實(shí)現(xiàn)不斷變化的標(biāo)簽
這篇文章主要介紹了原生JS實(shí)現(xiàn)不斷變化的標(biāo)簽，可以上下浮動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
H5基于iScroll實(shí)現(xiàn)下拉刷新和上拉加載更多
這篇文章主要為大家詳細(xì)介紹了H5基于iScroll實(shí)現(xiàn)下拉刷新和上拉加載更多效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
微信小程序使用request網(wǎng)絡(luò)請求操作實(shí)例
這篇文章主要介紹了微信小程序使用request網(wǎng)絡(luò)請求操作,結(jié)合實(shí)例形式分析了wx.request(object)網(wǎng)絡(luò)請求操作的具體使用技巧,需要的朋友可以參考下
2017-12-12
javascript foreach中如何獲取數(shù)組下標(biāo)/index
這篇文章主要介紹了javascript foreach中如何獲取數(shù)組下標(biāo)/index問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
JavaScript實(shí)現(xiàn)網(wǎng)頁tab欄效果制作
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁tab欄效果制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11
拖動時防止選中
本文主要介紹了拖動時防止選中的小知識點(diǎn)。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02