ajax获取单选按钮的值_前端设计-JavaScript实现复选框的分组单选

JavaScript复选框的分组单选实现

近期在制作MVC实例教学课件中，选择使用了在线考试作为题材进行页面的设计，在线考试主要提供单项选择题，用户点击选择项之后提交服务器端。页面布局时使用了复选按钮进行了选项的设置。本文主要讨论分组复选框模拟实现单选功能。

---

实现效果

本例设计使用复选按钮模拟单选按钮主要原因是出于页面的美观。考试页面需要将复选按钮按照题目进行分组，并且针对同一题目只允许选择一个，即模拟实现单选功能。设计页面效果如下图：

考试页面设计效果

考试页面设计效果如上图，按照题目编号分组后实现单选功能。操作动画演示如下图：

动态实现效果展示

---

实现基本思路

使用复选框模拟分组单选按钮设计及实现效果描述如上所示，其实现主要需要借助JavaScript前端交互脚本技术。具体实现思路描述如下：

1、获取被点击复选框编号

获取复选框被点击的编号id主要目的是需要通过编号判断当前复选框属于哪一个分组。进而确定第几道题的第几个选项被点击。

2、获取被点击复选框同组复选框编号

在获取当前点击复选框之后可以通过取余数运算获取余数。设计每个题目必须具有四个选项。通过%4进行取余数。根据余数获取本组其他复选框的ID值。如余数为0，表示当前被点击的是本组最后一个复选框。

3、设置本组其他复选框为未选中状态

在获取本组其他复选框之后，可以进一步通过JavaScript文档对象模型的getElementById()方法获取每一个复选框，并设置其checked属性值为false，表示未选中。

---

编码实现

在明确基本实现思路之后可以进行前端HTML页面的设计及JavaScript的编码操作实现等。按照设计思路，需要将试题中出现的所有复选框都设置ID属性。且ID属性需要按照从 1递增进行设置。设计Name属性用于实现分组，即同一题目四个选项对应的复选框Name相同。前端HTML代码描述如下：

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，即可设置复选框未选中状态。

以上给出实现复选框的分组单选的实习代码说明，完整代码描述如下图所示：

复选框分组模拟单选框完整JS实现代码

---

以上给出复选框模拟分组单选框实现思路及代码，本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！