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的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
微信小程序发送短信验证码完整实例
Jan 07 Javascript
JS 5种遍历对象的方式
Jun 16 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
PHP安全编程之加密功能
2006/10/09 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
$()JS小技巧
2007/07/21 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
python实现mysql的读写分离及负载均衡
2018/02/04 Python
如何用Python合并lmdb文件
2018/07/02 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
新闻专业应届生求职信
2013/10/31 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
匿名信格式范文
2015/05/27 职场文书
网聊搭讪开场白
2015/05/28 职场文书
三下乡活动心得体会
2016/01/23 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
python之django路由和视图案例教程
2021/07/26 Python