把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; } } } } }  

测试代码:

new document

您所在的城市:安徽 浙江 江苏 北京
 

 

测试结果:

您所在的城市:安徽 浙江 江苏 北京

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)