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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python多线程学习资料
2012/12/19 Python
python生成IP段的方法
2015/07/07 Python
详解Python中dict与set的使用
2015/08/10 Python
python实现彩票系统
2020/06/28 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
生产管理的三大手法
2013/11/11 职场文书
求职个人评价范文
2014/04/09 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python