把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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python三大器_Python - 三大器 迭代器,生层器,装饰器

Python - 三大器 迭代器,生层器,装饰器在介绍三大器之前先来了解一下容器和可迭代对象...一. 容器容器是一种把多个元素组织在一起的数据结构&#xff0c;容器中的元素可以逐个地迭代获取&#xff0c;可以用in, not in关键字判断元素是否包含在容器中。通常这类数据结构把所有的…

python类的成员函数_Python为类对象动态添加成员函数

Python: 为对象动态添加函数 , 且函数定义 来自一个 str 在 Python 中 , 通常情况下 , 你只能为对象添加一个已经写好的方法 需求 : 传入一个 str 类型的变量 , 其值是一个完整的合法的 Python 函数定义 , 然后为一个对象添 加这个函数 : method_strudef say(self, name) print…

关于重装系统后或打补丁后不能上网的问题的解决

前些日子&#xff0c;换了新机器&#xff0c;装系统&#xff0c;然后下驱动装一些最基本的软件&#xff0c;如QQ&#xff0c;安全卫士&#xff0c;杀毒软件&#xff08;俺只用免费的&#xff0c;嘿嘿&#xff0c;如德国的小红伞&#xff0c;一般情况就作够用了&#xff09;。上…

java对接华为推送服务_华为HMS Core 4.0版本即将来袭:包含新推送服务

据官方消息&#xff0c;在12月27日的HUAWEI Developer Groups(简称HDG)大连活动上&#xff0c;华为消费者云服务HMS运营经理透露HMS Core 4.0版本即将上线&#xff0c;由原来的14项增加至24项核心开放功能&#xff0c;近日即将开放新版本众测&#xff0c;不久之后开发者们将会体…

python xml etree_python解析xml文件之xml.etree.cElementTree和xml.etree.ElementTree区别和基本使用...

1、解析速度&#xff1a;ElementTree在 Python 标准库中有两种实现。一种是纯 Python 实现例如 xml.etree.ElementTree &#xff0c;另外一种是速度快一点的 xml.etree.cElementTree 。你要记住&#xff1a; 尽量使用 C 语言实现的那种&#xff0c;因为它速度更快&#xff0c;而…

CISSP的成长之路(二十一):用户持有凭证

在51CTO安全频道特别策划的CISSP的成长之路系列的上一篇文章《讲解身份验证过程》里,J0ker给大家介绍了用户验证时所依赖的三种验证要素、密码和密码短语及其安全使用原则。作为技术实施难度和成本最低的用户验证方案&#xff0c;基于密码的用户验证方案广泛应用于我们的日常生…

mysql主从同步面试题_面试被问MySQL 主从复制,怎么破?

注意&#xff1a;此处使用的是新创建的账户。# 4.4 启动主从复制1)启动从库 slave 线程&#xff1a;start slave;2)查看从服务器复制功能状态&#xff1a;show slave status\G;返回结果&#xff1a;*************************** 1. row ***************************Slave_IO_St…

python控制手机自动刷新闻_Python控制android手机实现微信自动跳一跳

学习一个新东西一定要有趣&#xff0c;如果只是简单学习语法太枯燥了。弄了个跳一跳的程序&#xff0c;注释写的很清楚#!/usr/bin/env python # encoding: utf-8 # software: PyCharm # time: 2019/7/10 15:39 # author: Paulson●Wier # file: jump_跳一跳.py # desc: import …

独家:Havok 发布新的 AI 中间件

独家&#xff1a;Havok 发布新的 AI 中间件 March 23rd, 2009 Alex J. Champandard 2009-3-23&#xff0c;赖勇浩&#xff08;http://blog.csdn.net/lanphaday&#xff09;译 原文地址&#xff1a;http://aigamedev.com/middleware/havok-ai-announced 在20日&#xff08;上周五…

mysql查询入门_Mysql入门(四)查询

我们继续查询~条件查询及逻辑运算符条件查询如果我只想查询&#xff0c;年级小于30的&#xff0c;可以加个where条件关键字~条件查询敲黑板select * from yingxiong where y_age<30where 表示条件(条件关键字)&#xff0c;在where之后跟过滤的条件注意&#xff1a;逻辑运算符…

maven provided_Maven 教程之 pom.xml 详解

点击上方“Java知音”&#xff0c;选择“置顶公众号”技术文章第一时间送达&#xff01;作者&#xff1a;dunwuhttps://github.com/dunwu/blog推荐阅读(点击即可跳转阅读)1. SpringBoot内容聚合2. 面试题内容聚合3. 设计模式内容聚合4. Mybatis内容聚合5. 多线程内容聚合简介什…

python将一个列表里面的某类元素取出来_03|Python列表常见操作

欢迎关注pythoner派微信公众号及头条号Python常见的数据结构我们在上一节中已经讲过再阅读文章前&#xff0c;请打开PythonIDE列表&#xff1a;1.定义一个列表现在我们有3瓶不同类型的啤酒&#xff0c;现在我们将其放入列表之中beer [粉象,白熊,橙色炸弹]2.向列表中追加元素现…

使用SDL打造游戏世界之入门篇 - 2

VC6下SDL的安装和初步使用首先&#xff0c;我们为所有的工程创建一个文件夹tutorial,将下载的开发库SDL-devel-1.2.8-VC6.zip拷贝到tutorial下并解压&#xff0c;并保证如下的文件夹层次&#xff08;图2&#xff09;如下&#xff1a;图2下面我们打开Visual Studio6.0&#xff0…

python虚拟环境管理工具_Python虚拟环境和包管理工具Pipenv的使用详解--看完这一篇就够了...

前言Python虚拟环境是一个虚拟化&#xff0c;从电脑独立开辟出来的环境。在这个虚拟环境中&#xff0c;我们可以pip安装各个项目不同的依赖包&#xff0c;从全局中隔离出来&#xff0c;利于管理。 传统的Python虚拟环境有virtualenv&#xff0c;使用pip freeze → requirements…

python中upper函数有什么用_几个有用的python字符串函数(format,join,split,startwith,endwith,lower,upper)...

你需要知道的python字符串函数 format 字符串的format函数为非字符串对象嵌入字符串提供了一种非常强大的方法。在format方法中&#xff0c;字符串使用{}来代替一系列字符串的参数并规定格式。下面通过几个例子来详细解释其用法 直接使用{} apple_num 10 print("I have {…

QA

开发期间测试人员的工作是很多的&#xff0c;首先&#xff0c;要参加评审工作&#xff0c;比如需求评审、概要设计评审、详细设计评审等等&#xff0c;在评审过程中不要只抱着学习的目的&#xff0c;而是要提出有意义的建议&#xff0c;比如在需求评审中要提出一对可测试性需求…

用于连接mysql的java类_【考试】列举Java连接数据库用到的类有哪些。

好吧&#xff0c;说明一下JDBC连接数据库的步骤。创建一个以JDBC连接数据库的程序&#xff0c;包含7个步骤&#xff1a;1、加载JDBC驱动程序&#xff1a;例如&#xff1a;try{//加载MySql的驱动类Class.forName("com.mysql.jdbc.Driver") ;}catch(ClassNotFoundExcep…

水晶报表的统计功能-Crystal Report Sub total Per Page

先大概表述下我对水晶报表的理解&#xff1a; 大体上Crystal Report 可以理解为3部分&#xff1a; 第一部分&#xff1a;数据引擎 Crystal Report 集成了各种数据访问接口&#xff0c;可以方便的从数据仓库中提取数据&#xff0c;并把返回的数据做为一个数据集。 第二部分&…

centos 6.8安装git_RPM包的卸载与安装,包含依赖包卸载

一、 rpm包的管理介绍&#xff1a;一种用于互联网下载包的打包及安装工具&#xff0c;它包含在某些Linux分发版中&#xff0c;它生成具有RPM扩展名的文件&#xff0c;RPM是RedHat Package Manager&#xff08;RedHat软件包管理工具&#xff09;的缩写&#xff0c;类似windows的…

内置系统账户:Local system/Network service/Local Service 区别

LocalSystem 账户   LocalSystem是预设的拥有本机所有权限的本地账户&#xff0c;这个账户跟通常的用户账户没有任何关联&#xff0c;也没有用户名和密码之类的凭证。这个服务账户可以打开注册表的HKEY_LOCAL_MACHINE\Security键&#xff0c;当LocalSystem访问网络资源时&a…