![ec010b301fc6544934741b3ccef1436e.png](https://i-blog.csdnimg.cn/blog_migrate/032422eaa18b808c858037ee025bd4b3.jpeg)
JavaScript复选框的分组单选实现
近期在制作MVC实例教学课件中,选择使用了在线考试作为题材进行页面的设计,在线考试主要提供单项选择题,用户点击选择项之后提交服务器端。页面布局时使用了复选按钮进行了选项的设置。本文主要讨论分组复选框模拟实现单选功能。
实现效果
本例设计使用复选按钮模拟单选按钮主要原因是出于页面的美观。考试页面需要将复选按钮按照题目进行分组,并且针对同一题目只允许选择一个,即模拟实现单选功能。设计页面效果如下图:
![b2c7d8a92f571f3419001c8cd0fca7d7.png](https://i-blog.csdnimg.cn/blog_migrate/9a93343172d0c4922d31ad4061e84169.jpeg)
考试页面设计效果
考试页面设计效果如上图,按照题目编号分组后实现单选功能。操作动画演示如下图:
![968300860c8ca87e3c00e9379eeff820.gif](https://i-blog.csdnimg.cn/blog_migrate/b563bdc2508170800e149b29a8019891.gif)
动态实现效果展示
实现基本思路
使用复选框模拟分组单选按钮设计及实现效果描述如上所示,其实现主要需要借助JavaScript前端交互脚本技术。具体实现思路描述如下:
1、获取被点击复选框编号
获取复选框被点击的编号id主要目的是需要通过编号判断当前复选框属于哪一个分组。进而确定第几道题的第几个选项被点击。
2、获取被点击复选框同组复选框编号
在获取当前点击复选框之后可以通过取余数运算获取余数。设计每个题目必须具有四个选项。通过%4进行取余数。根据余数获取本组其他复选框的ID值。如余数为0,表示当前被点击的是本组最后一个复选框。
3、设置本组其他复选框为未选中状态
在获取本组其他复选框之后,可以进一步通过JavaScript文档对象模型的getElementById()方法获取每一个复选框,并设置其checked属性值为false,表示未选中。
编码实现
在明确基本实现思路之后可以进行前端HTML页面的设计及JavaScript的编码操作实现等。按照设计思路,需要将试题中出现的所有复选框都设置ID属性。且ID属性需要按照从 1递增进行设置。设计Name属性用于实现分组,即同一题目四个选项对应的复选框Name相同。前端HTML代码描述如下:
![707ca894525776bd5aad5f74e214ad55.png](https://i-blog.csdnimg.cn/blog_migrate/19d5c44836e0b424a6ee582c03a55f03.jpeg)
input标记及属性设置
input标记及属性设置描述如上图所示,设置id用于标志每一个复选框,设计name标志分组,设计onclick事件用于接受模拟单选操作。
本例设计函数setValue()用于实现处理模拟单选操作,该函数传递标志自身的this。在接收到this之后可以通过它获取对应的id值,并进行进一步处理。基本操作步骤如下:
1、var eid=this.id;
获取当前点击复选框对应的id值并存储变量eid中。
2、var i=eid%4
取余数判断当前复选框在所属组中的位次。
3、var el=new Array(3)
定义数组保存本组其他复选框的id编号值。
4、Switch判断语句给el赋值
通过i的取值分别设置el对应元素值。
5、使用for循环批量设计checked属性值
设置checked属性值为false,即可设置复选框未选中状态。
以上给出实现复选框的分组单选的实习代码说明,完整代码描述如下图所示:
![7acf3f093459d5b5250236fec142432d.png](https://i-blog.csdnimg.cn/blog_migrate/bf1f4e33d64e7f6dd45d6fd6bb4f364f.jpeg)
复选框分组模拟单选框完整JS实现代码
以上给出复选框模拟分组单选框实现思路及代码,本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可在评论区回复。更多程序设计相关教程及实例分享,期待大家关注与阅读!