把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相关推荐
- Android基础入门教程——2.3.5.RadioButton(单选按钮)Checkbox(复选框)
Android基础入门教程--2.3.5.RadioButton(单选按钮)&Checkbox(复选框) 标签(空格分隔): Android基础入门教程 本节引言: 本节给大家带来的是Ando ...
- checkbox(复选框)和radio(单选按钮)的区别与详解
选中和取消 选中一个 checkbox(复选框) 后,再次点击它,即可取消选中 选中一个 radio(单选按钮) 后,再次点击它,不能取消选中 <!DOCTYPE html> <ht ...
- html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
- uview Checkbox 复选框勾选，删除某一项遇见的bug，复用导致的问题
uview Checkbox 复选框勾选,删除某一项遇见的bug 如下图,所示,正常新建了子任务123,1跟3勾选. 紧接着删除子任务2,发现原本子任务3勾选消失了 查看里面保存勾选的值,的的确确有两 ...
- js checkbox复选框实现单选功能
本文仅供学习交流使用,demo下载见文末 js checkbox复选框实现单选功能 <script type="text/javascript">$(":ch ...
- checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
- android勾选控件_Android中CheckBox复选框控件使用方法详解
CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建Linea ...
- js获取checkbox复选框获取选中的选项
分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...
- Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目 配置项 类型 说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...
最新文章
- dd linux 尾部添加0_Linux文件目录命令整理Linux学习
- 云端上的字节，引擎火力全开
- mysql数据库之单表查询
- Jedis问题解决方案大全:No more cluster attempts left
- python tab键自动补全_设置python中TAB键自动补全方法
- lightGBM用于排序(Learning to Rank )
- tensorflow：图（Graph）的核心数据结构与通用函数（Utility function）
- three.js 使用DragControls.js 拖动元素
- 2.泡妞与设计模式(三) 外观模式
- leetcode之四数相加
- 爱奇艺开源的高性能网络安全监控引擎
- 【计算机网络】（谢希仁）第七版答案
- php产品管理系统,企业商品进销存管理系统
- 求出字符串中大写字母，小写字母和数字的个数
- jar包运行报错jar中没有主清单属性、springGateway访问接口报错302，跳转login接口
- 自定义 UINavigationController
- 2017年下半年阅读书单
- 光量子计算机的功能,什么是光计算机和量子计算机？
- C++ opengl 漫反射和镜面反射参数
- VsCode：设置前进和后退 （返回上一个浏览位置/下一个浏览位置）快捷键