JS实现checkbox互斥(单选)功能示例
2019/6/26 23:05:20
本文主要是介绍JS实现checkbox互斥(单选)功能示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了JS实现checkbox互斥(单选)功能。分享给大家供大家参考,具体如下:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>www.zyiz.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.zyiz.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
这篇关于JS实现checkbox互斥(单选)功能示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set