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實作代碼
以上給出複選框模拟分組單選框實作思路及代碼，本頭條号長期關注程式設計資訊分享；程式設計課程、素材、代碼分享及程式設計教育訓練。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回複。更多程式設計相關教程及執行個體分享，期待大家關注與閱讀！