快捷導(dǎo)航

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

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

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

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>www.dbjr.com.cn CheckBox單選</title>
<script language="javascript">
function sel1(obj){
  if(obj.checked){
//如果當(dāng)前項(xiàng)被選中了
   document.all.chk2.checked=false
//則不能選擇第二組
  document.all.sel1.selectedIndex=4
//指定下拉框中選擇的項(xiàng)
  }
}
function sel2(obj){
  if(obj.checked){
//如果當(dāng)前項(xiàng)被選中了
  document.all.chk1.checked=false
//則不能選擇第一組
  document.all.sel1.selectedIndex=0
//指定下拉框中選擇的項(xiàng)
  }
}
</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">個(gè)人</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錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于javascript的COOkie的操作實(shí)現(xiàn)只能點(diǎn)一次
這篇文章主要介紹了基于javascript的COOkie的操作實(shí)現(xiàn)只能點(diǎn)一次,需要的朋友可以參考下
2014-12-12
《JavaScript函數(shù)式編程》讀后感
這里給大家分享的是個(gè)人在最近看《JavaScript函數(shù)式編程》一書的第一章之后的一些感觸和理解，這里記錄下來，有需要的小伙伴可以參考下
2015-08-08
JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
JavaScript本地存儲(chǔ)與會(huì)話存儲(chǔ)的實(shí)現(xiàn)介紹
本地存儲(chǔ)和會(huì)話存儲(chǔ)是比較常用的方法，你知道兩者的區(qū)別嗎，本文詳細(xì)的介紹了JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-08-08
uniapp自定義頁面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼
有些頁面加載起來比較慢,為了加強(qiáng)用戶體驗(yàn)效果,所以一般都會(huì)做一個(gè)頁面加載等待的提示,頁面加載完成后消失,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義頁面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2023-06-06
Javascript使用uploadify來實(shí)現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來實(shí)現(xiàn)多文件上傳，具有一定的參考價(jià)值，有需要的可以了解一下。
2016-11-11
JavaScript中九種常用排序算法
不同的排序算法，執(zhí)行效率有著天壤之別，本腳本用JavaScript演示了各種常見的排序算法，包括：冒泡排序、選擇排序、插入排序、謝爾排序、快速排序(遞歸)、快速排序(堆棧)、歸并排序、堆排序
2014-09-09
元素的內(nèi)聯(lián)事件處理函數(shù)的特殊作用域在各瀏覽器中存在差異
在一個(gè)元素的屬性中綁定事件，實(shí)際上就創(chuàng)建了一個(gè)內(nèi)聯(lián)事件處理函數(shù)（如<h1 onclick="alert(this);"...>...</h1>）,內(nèi)聯(lián)事件處理函數(shù)有其特殊的作用域鏈，并且各瀏覽器的實(shí)現(xiàn)細(xì)節(jié)也有差異。
2011-01-01
JavaScript實(shí)現(xiàn)的九種排序算法
這篇文章主要給大家介紹了關(guān)于利用JavaScript實(shí)現(xiàn)的九種排序算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
JS數(shù)組去重的九種高階方法（親測有效）
這篇文章主要給大家介紹了關(guān)于JS數(shù)組去重的九種高階方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04