JS实现checkbox互斥(单选)功能示例
更新时间：2019年05月04日 11:05:40 作者：十二分努力
这篇文章主要介绍了JS实现checkbox互斥(单选)功能,涉及JavaScript针对页面元素属性的判断及动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了JS实现checkbox互斥(单选)功能。分享给大家供大家参考，具体如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了基于javascript的COOkie的操作实现只能点一次,需要的朋友可以参考下2014-12-12
这里给大家分享的是个人在最近看《JavaScript函数式编程》一书的第一章之后的一些感触和理解，这里记录下来，有需要的小伙伴可以参考下2015-08-08
这篇文章主要介绍了JS module的导出和导入的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
本地存储和会话存储是比较常用的方法，你知道两者的区别吗，本文详细的介绍了JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用，具有一定的参考价值，感兴趣的可以了解一下2022-08-08
有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失,下面这篇文章主要给大家介绍了关于uniapp自定义页面跳转loading的实现代码,需要的朋友可以参考下2023-06-06
本篇文章主要介绍了Javascript使用uploadify来实现多文件上传，具有一定的参考价值，有需要的可以了解一下。2016-11-11
不同的排序算法，执行效率有着天壤之别，本脚本用JavaScript演示了各种常见的排序算法，包括：冒泡排序、选择排序、插入排序、谢尔排序、快速排序(递归)、快速排序(堆栈)、归并排序、堆排序2014-09-09
在一个元素的属性中绑定事件，实际上就创建了一个内联事件处理函数（如<h1 onclick="alert(this);"...>...</h1>）,内联事件处理函数有其特殊的作用域链，并且各浏览器的实现细节也有差异。2011-01-01
这篇文章主要给大家介绍了关于利用JavaScript实现的九种排序算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要给大家介绍了关于JS数组去重的九种高阶方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论