JS实现checkbox互斥(单选)功能示例


Posted in Javascript onMay 04, 2019

本文实例讲述了JS实现checkbox互斥(单选)功能。分享给大家供大家参考,具体如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3water.com CheckBox单选</title>
<script language="javascript">
function sel1(obj){
  if(obj.checked){
//如果当前项被选中了
   document.all.chk2.checked=false
//则不能选择第二组
  document.all.sel1.selectedIndex=4
//指定下拉框中选择的项
  }
}
function sel2(obj){
  if(obj.checked){
//如果当前项被选中了
  document.all.chk1.checked=false
//则不能选择第一组
  document.all.sel1.selectedIndex=0
//指定下拉框中选择的项
  }
}
</script>
</head>
<body>
<p>A组
 <input type="checkbox" name="checkbox"
value="checkbox" id="chk1" onClick="sel1(this)">
</p>
<p>B组
 <input type="checkbox" name="checkbox2"
value="checkbox" id="chk2" onClick="sel2(this)">
</p>
<p>C
 <select name="select" id="sel1">
 <option selected="selected">个人</option>
 <option>200米</option>
 <option>400米</option>
 <option>800米</option>
 <option>200米接力</option>
 </select>
</p>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
微信小程序实现判断是分享到群还是个人功能示例
May 03 #Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 #Javascript
微信小程序实现的canvas合成图片功能示例
May 03 #Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 #Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 #Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
Python多线程原理与用法实例剖析
2019/01/22 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
慈善晚会策划方案
2014/05/14 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书