把checkbox复选框转换成单选按钮radio
文章原創，轉載請說明文章來自：http://blog.csdn.net/xxd851116/archive/2009/03/16/3994833.aspx
?
網頁中單選按鈕的缺陷 ：當一組單選按鈕選擇一項后改組按鈕無法撤銷選擇改組，導致必須選擇一項，用戶體驗差。
解決辦法：?
采用JavaScript方式（利用復選框可取消選擇的優勢對單選按鈕進行更改）
??function checkboxToRadio(checkboxName, form) { if (checkboxName == null) return; var f = form || document.forms[0]; checkboxs = document.getElementsByName(checkboxName); for(i = 0; i < checkboxs.length; i++){ checkboxs[i].onclick = function(){ for (j = 0; j < checkboxs.length; j++ ){ if (this.value != checkboxs[j].value && checkboxs[j].checked == true){ checkboxs[j].checked = false; } } } } }??
測試代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <form> 您所在的城市：<input type="checkbox" name="city" value="0" />安徽 <input type="checkbox" name="city" value="1" />浙江 <input type="checkbox" name="city" value="2" />江蘇 <input type="checkbox" name="city" value="3" />北京 <br/>? <input type="submit" name="submit" value="Submit"> </form> <mce:script type="text/javascript"><!-- checkboxToRadio("city"); function checkboxToRadio(checkboxName, form) { if (checkboxName == null) return; var f = form || document.forms[0]; checkboxs = document.getElementsByName(checkboxName); for(i = 0; i < checkboxs.length; i++){ checkboxs[i].onclick = function(){ for (j = 0; j < checkboxs.length; j++ ){ if (this.value != checkboxs[j].value && checkboxs[j].checked == true){ checkboxs[j].checked = false; } } } } } // --></mce:script> </body> </html>
?
測試結果：
您所在的城市：安徽 浙江 江蘇 北京1、分別選擇安徽 浙江 江蘇 后，最終確定為江蘇，安徽和浙江沒有被選中；
?
?
2、點擊提交后，地址呈現：file:///D:/java/ide/eclipse/checkboxToRadio.html?city=2&submit=Submit
轉載于:https://www.cnblogs.com/xingxiudong/archive/2009/03/16/3987107.html
總結
以上是生活随笔為你收集整理的把checkbox复选框转换成单选按钮radio的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iso9001认证多少钱啊？
- 下一篇： 妇检要多少钱啊？