把checkbox复选框转换成单选按钮radio
文章原創(chuàng)，轉(zhuǎn)載請(qǐng)說明文章來自：http://blog.csdn.net/xxd851116/archive/2009/03/16/3994833.aspx
?
網(wǎng)頁(yè)中單選按鈕的缺陷 ：當(dāng)一組單選按鈕選擇一項(xiàng)后改組按鈕無(wú)法撤銷選擇改組，導(dǎo)致必須選擇一項(xiàng)，用戶體驗(yàn)差。
解決辦法：?
采用JavaScript方式（利用復(fù)選框可取消選擇的優(yōu)勢(shì)對(duì)單選按鈕進(jìn)行更改）
??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; } } } } }??
測(cè)試代碼：
<!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>
?
測(cè)試結(jié)果：
您所在的城市：安徽 浙江 江蘇 北京1、分別選擇安徽 浙江 江蘇 后，最終確定為江蘇，安徽和浙江沒有被選中；
?
?
2、點(diǎn)擊提交后，地址呈現(xiàn)：file:///D:/java/ide/eclipse/checkboxToRadio.html?city=2&submit=Submit
轉(zhuǎn)載于:https://www.cnblogs.com/xingxiudong/archive/2009/03/16/3987107.html
總結(jié)
以上是生活随笔為你收集整理的把checkbox复选框转换成单选按钮radio的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iso9001认证多少钱啊？
- 下一篇： CISSP的成长之路（二十一）：用户持有