文章原创,转载请说明文章来自:/xxd851116/archive//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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/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
如果觉得《把checkbox复选框转换成单选按钮radio》对你有帮助,请点赞、收藏,并留下你的观点哦!