                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進階篇

單選時候如何變成只能選一個

輸入序號選擇，但是我想選一個，另一個就自動清除，只顯示一個框被選，怎么實現(xiàn)。

function checkone(){

? ? ? ? ? ? var j=document.getElementById("wb").value;

? ? ? ? ? ? var hobby = document.getElementById("hobby"+j);

? ? ? ? ? ? hobby.checked = true;

AJohnson

2016-07-30

源自：JavaScript進階篇 9-4

關注問題我要回答

798

操作

收起

3 回答

湛瞳回答被采納 +3 積分
2016-08-12

?<form>
??請選擇你愛好:<br>
??<input?type="checkbox"?name="hobby"?id="hobby1"?onclick="danxuan(this.id)">??音樂
??<input?type="checkbox"?name="hobby"?id="hobby2"?onclick="danxuan(this.id)">??登山
??<input?type="checkbox"?name="hobby"?id="hobby3"?onclick="danxuan(this.id)">??游泳
??<input?type="checkbox"?name="hobby"?id="hobby4"?onclick="danxuan(this.id)">??閱讀
??<input?type="checkbox"?name="hobby"?id="hobby5"?onclick="danxuan(this.id)">??打球
??<input?type="checkbox"?name="hobby"?id="hobby6"?onclick="danxuan(this.id)">??跑步?<br>
??<input?type="button"?value?=?"全選"?onclick?=?"checkall();">
??<input?type="button"?value?=?"全不選"?onclick?=?"clearall();">
??<p>請輸入您要選擇愛好的序號，序號為1-6:</p>
??<input?id="wb"?name="wb"?type="text"?>
??<input?name="ok"?type="button"?value="確定"?onclick?=?"checkone();">
?</form>
?<script?type="text/javascript">
??//?復選框checkbox用作為單選框
??function?danxuan(thisid){
???var?hobby?=?document.getElementsByName("hobby");
???var?index;
???for?(var?i=1;i<hobby.length?+?1;i++)?{
????document.getElementById("hobby"?+?i).checked?=?false;
???}
???document.getElementById(thisid).checked?=?true;
??}

??//?任務1
??function?checkall(){
???var?hobby?=?document.getElementsByTagName("input");
???for?(var?i=0;i<hobby.length-1;i++)
????hobby[i].checked=true;
??}
??//?任務2?
??function?clearall(){
???var?hobby?=?document.getElementsByName("hobby");
???for?(var?i=0;i<hobby.length-1;i++)
???hobby[i].checked=false;
??}
??//?任務3
??function?checkone(){
???var?j=0;
???j=parseInt(document.getElementById("wb").value);
???var?hobby?=?document.getElementsByName("hobby");
???switch(j){
????case?1:?hobby[0].checked=true;
???????????????break;
????case?2:?hobby[1].checked=true;
??????break;
????case?3:?hobby[2].checked=true;
???????????????break;????????
????case?4:?hobby[3].checked=true;
??????break;????????
????case?5:?hobby[4].checked=true;
????????????break;????????
????case?6:?hobby[5].checked=true;
????????????break;
????default:
??????break;
???}
??}
?</script>

僅供參考