JS代码实现两组复选框互斥问题
2024-06-30 本站作者 【 字体:大 中 小 】
实例名称
JS代码实现两组复选框互斥问题
实例描述
有时候可以将复选框分为两组,选择了A组就不能选择B组。如在一些运动项目中,运动员选择了200米,可能就不能选择200米接力。本例通过两组复选框,学习如何实现两组选项之间的互斥。
实例代码
html xmlns="" headtitle标题页-学无忧 language="javascript"function sel1obj //如果当前项被选中了 =false //则不能选择第二组 =4 //指定下拉框中选择的项 function sel2obj //如果当前项被选中了 =false //则不能选择第一组 =0 //指定下拉框中选择的项 /script/headbodypA组 input type="checkbox" name="checkbox" value="checkbox" id="chk1" onClick="sel1this"/ppB组 input type="checkbox" name="checkbox2" value="checkbox" id="chk2" onClick="sel2this"/ppC select name="select" id="sel1" option selected="selected"个人/option option200米/option option400米/option option800米/option option200米接力/option /select/p/body/html
运行效果
![JS代码实现两组复选框互斥问题](http://img.canyinms.com/202406/30/17/dcc63271b91e83d4f7034197b89c4800.jpg)
难点剖析
本例的重点是如何实现两组复选框的互斥。“checked”属性用来设置复选框是否选中,其值如果为“true”则表示选中,为“false”表示未选中。当改变“A组’’复选框选中状态的时候,需要先判断其是否被选中,如果被选中则设置“B组”复选框的“checked”属性为“false”,否则设置为“true”。
源码下载
![](/kaifadou/static/images/ndArrow.png)
猜你喜欢
![洛克王国齿轮修复怎么玩齿轮获取及修复方法](/kaifadou/static/images/default.jpg)
洛克王国齿轮修复怎么玩齿轮获取及修复方法
![](/kaifadou/static/images/watch.png)
![京东怎么开启夜间模式京东开启夜间模式的方法](/kaifadou/static/images/default.jpg)
京东怎么开启夜间模式京东开启夜间模式的方法
![](/kaifadou/static/images/watch.png)
![真·女神转生V:复仇创世or复仇耕升RTX4070SUPER踏雪Mini共探末日东京](/kaifadou/static/images/default.jpg)
真·女神转生V:复仇创世or复仇耕升RTX4070SUPER踏雪Mini共探末日东京
![](/kaifadou/static/images/watch.png)
![凤凰游戏商城周三限时闪促原子之心新史低139元](/kaifadou/static/images/default.jpg)
凤凰游戏商城周三限时闪促原子之心新史低139元
![](/kaifadou/static/images/watch.png)
![觅长生叠毒流玩法介绍](/kaifadou/static/images/default.jpg)
觅长生叠毒流玩法介绍
![](/kaifadou/static/images/watch.png)
![赛马娘手游大树快车最强英里跑者称号获得方法](/kaifadou/static/images/default.jpg)
赛马娘手游大树快车最强英里跑者称号获得方法
![](/kaifadou/static/images/watch.png)
![怪物猎人世界贝希摩斯讨伐建议怪物猎人世界讨伐贝爷注意事项](/kaifadou/static/images/default.jpg)
怪物猎人世界贝希摩斯讨伐建议怪物猎人世界讨伐贝爷注意事项
![](/kaifadou/static/images/watch.png)
![战神联盟属性培养技巧战神联盟做培养心得](/kaifadou/static/images/default.jpg)
战神联盟属性培养技巧战神联盟做培养心得
![](/kaifadou/static/images/watch.png)
![小米14ultra怎么设置徕卡水印小米14ultra设置徕卡水印的方法详解](/kaifadou/static/images/default.jpg)
小米14ultra怎么设置徕卡水印小米14ultra设置徕卡水印的方法详解
![](/kaifadou/static/images/watch.png)
![LOL不灭消耗流船长,LOL船长桶稳中求胜](/kaifadou/static/images/default.jpg)
LOL不灭消耗流船长,LOL船长桶稳中求胜
![](/kaifadou/static/images/watch.png)
![](/kaifadou/static/images/info2.png)
2024去云南旅游最佳路线 云南旅游的最佳路线安排
![2024去云南旅游最佳路线 云南旅游的最佳路线安排](http://img.canyinms.com/d/file/kaifadou/202402/GVirBsZVfvtnrpqIOXQUOj5W.jpg)
![](/kaifadou/static/images/info2.png)
2024最适合穷游的12个地方 一个人穷游去哪里好
![2024最适合穷游的12个地方 一个人穷游去哪里好](http://img.canyinms.com/d/file/kaifadou/202402/jfhGKvsXDScsMQY7WWH17FKy.jpg)
![](/kaifadou/static/images/info2.png)
2024桂林必去五个景点 桂林旅游必看景点
![2024桂林必去五个景点 桂林旅游必看景点](http://img.canyinms.com/d/file/kaifadou/202402/8W6yI8gH3elxuT5qt6FMTdVi.jpg)
![](/kaifadou/static/images/info2.png)
2024清明家庭旅游最佳去处 清明节去哪里玩比较好
![2024清明家庭旅游最佳去处 清明节去哪里玩比较好](http://img.canyinms.com/d/file/kaifadou/202402/3gMDAIKT9WyEdryWbs0vxGJd.jpg)
![](/kaifadou/static/images/info2.png)
张家界旅游必去景区 张家界旅游景点推荐
![张家界旅游必去景区 张家界旅游景点推荐](http://img.canyinms.com/d/file/kaifadou/202402/nRcQkTXKexc9bzLpfHVFir4O.jpg)
![](/kaifadou/static/images/info2.png)
2024重庆旅游攻略 2024年重庆旅游景点
![2024重庆旅游攻略 2024年重庆旅游景点](http://img.canyinms.com/d/file/kaifadou/202402/yzCn5g0osKEt0aaJzI2G49Kw.jpg)
![](/kaifadou/static/images/info2.png)
西安旅游攻略自由行路线推荐 第一次去西安旅游攻略
![西安旅游攻略自由行路线推荐 第一次去西安旅游攻略](http://img.canyinms.com/d/file/kaifadou/202402/tJKA2BNXdC6oLgxesMVWzTC9.jpg)
![](/kaifadou/static/images/info2.png)
2024昆明旅游攻略景点大全 昆明有什么好玩的地方推荐
![2024昆明旅游攻略景点大全 昆明有什么好玩的地方推荐](http://img.canyinms.com/d/file/kaifadou/202402/GVirBsZVfvtnrpqIOXQUOj5W.jpg)
![](/kaifadou/static/images/info2.png)
成都旅游必去十大景点推荐 四川成都最值得去的十大景点
![成都旅游必去十大景点推荐 四川成都最值得去的十大景点](http://img.canyinms.com/d/file/kaifadou/202402/yxQSvAVv9ztxUW2Blfhggt3z.jpg)
![](/kaifadou/static/images/info2.png)
2024山西旅游必去十大景点 山西必去景点攻略地
![2024山西旅游必去十大景点 山西必去景点攻略地](http://img.canyinms.com/d/file/kaifadou/202402/ukzErbAPqoHaEL65eYt5IfbN.jpg)