點擊文字也可選中相對應的單選按鈕或復選按鈕


問題:點擊文字和點擊按鈕,選項框都能夠被選中

在用表單設計調查表時,為了減少用戶的操作,使用選擇框是一個好主意,在HTML的<input>標記中有兩種選擇框,即單選框和復選框,兩者的區別是單選框中的選項用戶只能選擇一項,而復選框中的選項用戶可以任意選擇多項,甚至全選。請看下面的例子: 

       下面給出這個例子的源代碼,結合代碼來講各參數的設置:
<form name="form1" > 
你是否喜歡旅游?請選擇:<br> 
<input type="radio" name="radiobutton" value="radiobutton" checked> 喜歡  
<input type="radio" name="radiobutton" value="radiobutton"> 不喜歡  
<input type="radio" name="radiobutton" value="radiobutton"> 無所謂<br> 
<br> 
您對那些運動感興趣,請選擇:<br> 
<input type="checkbox" name="checkbox1" value="checkbox"> 跑步 
<input type="checkbox" name="checkbox2" value="checkbox"> 打球  
<input type="checkbox" name="checkbox3" value="checkbox"> 登山  
<input type="checkbox" name="checkbox4" value="checkbox"> 健美<br> 
</form> 


  從上面的源代碼中可看出,制作單選框只要把<input>標記的type參數設置為type="radio"就行了;而制作復選框則只要把<input>標記的type參數設置為type="checkbox"就行了。至於實際應用中用那種選擇框,要根據實際需要而定。若只需用戶有一種選擇的,就用單選框,如本例中“你是否喜歡旅游?”這個問題,用戶只能是一種選擇,所以采用了單選框;若允許用戶有多項選擇的內容,則采用復選框,如本例中的“你對那些運動感興趣?”這個問題,因一個人的興趣可能是多方面的,所以采用了復選框。

  在<input>標記中設定checked參數,則該選框就被默認選中。如本例的第一個單選框(“喜歡”下面那個單選框)就設置為默認選中,這樣用戶若是想選擇“喜歡”的話,就可以不用再選了,當然,若用戶要選擇了“不喜歡”,則只要點擊“不喜歡”下的那單選框,而默認值被自動取消。用同樣的方法也可以設置某個復選框為默認被選中。但是復選框的默認選中不可濫用,否則會引起用戶的反感。

      在radio里面千萬要注意記得把所有的<input type='radio'>這個對象的name屬性都設為相同的,比如說上例的 name="radiobutton" ,記住不是ID屬性,只有這樣才能實現單選的效果,不然的話上面例子的‘喜歡’、‘不喜歡’、‘無所謂’就可以同時選上了,切記!

那么如何實現點擊文字按鈕呢?只需要添加一個label標簽即可,但是需要注意的是:文字必須是label標簽內,checkbox的id和<label>標簽內的for=""中的名字必須相同.

<form name="form1" > 
你是否喜歡旅游?請選擇:<br> 
<input type="radio" id="like" name="radiobutton" value="radiobutton" checked> <label for="like">喜歡</label> 
<input type="radio" id="nolike" name="radiobutton" value="radiobutton"> <label for="nolike">不喜歡</label> 
<input type="radio" id="nocare" name="radiobutton" value="radiobutton"><label for="nocare">無所謂</label>
<br> 
您對那些運動感興趣,請選擇:<br> 
<input type="checkbox" id="run" name="checkbox1" value="checkbox"> <label for="run">跑步</label> 
<input type="checkbox" id="playball" name="checkbox2" value="checkbox"><label for="playball">打球</label> 
<input id="hiking" type="checkbox" name="checkbox3" value="checkbox"><label for="hiking">爬山</label> 
<input id="dance" type="checkbox" name="checkbox4" value="checkbox"> <label for="dance">健美</label>
</form>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM