JS限制複選框選中個數

1.1 問題描述

製作調查問卷類的填報範本時，可能會需要限制複選框組選中的個數，如限制複選框的個數為 2 個，若超過 2 個就則將所有選中的值清空或者清空超出的部分，如下圖所示：

1.2 實現思路

透過 JS 獲取當前儲存格的值，然後透過 length 屬性判斷長度並進行操作。

2.1 準備範本

建立範本，在 A1 儲存格中新增一個「複選按鈕組元件」，為其綁定自訂資料資料 A、B、C、D、E，如下圖所示：

2.2 新增 JS 事件

實現將所有選中的值清空或清空超出的部分，JS程式碼是不同的。

2.2.1 清空所有選中的值

給複選框組元件增加一個「狀態改變」事件，如下圖所示：

JavaScript 程式碼如下：

var value = this.getValue();
//獲取當前元件的值
if (value.length > 2) {
	//判斷當前儲存格的值的長度是否超過2個
	alert("長度為" + value.length + "，超過最大長度2了！");
	this.reset();
	//將資料重置即清空選中的資料
}

注：也可以使用 this.setValue("");來清空資料。

2.2.2 清空超出部分的值

給複選框組元件增加一個「狀態改變」事件，如下圖所示：

JavaScript 程式碼如下：

var value = this.getValue();
//獲取元件最新選中的值
var oldvalue = _g().getCellValue(0, 0, 0);
//獲取A1儲存格原來選中的值
if (value.length > 2) {
	alert("長度為" + value.length + ",超過最大長度2了！");
	this.setValue(oldvalue);
	//將A1儲存格的值設定為原來選中的值
}

2.3 預覽效果

2.3.1 清空所有選中的值

儲存範本，點選「填報預覽」，選中 3 個複選框的值會彈出“超出最大長度 2”，點選確定後，資料清空。

PC 端效果如下圖所示：

App 及 HTML5 效果如下圖所示：

2.3.2 清空超出部分的值

儲存範本，點選「填報預覽」，選中 3 個複選框的值會彈出“超出最大長度 2”，點選確定後，只清空了第三個選中的資料。如下圖所示：

清空所有選中的值：

點選下載範本：JS限制複選框（填报）選中個數範例一.cpt

清空超出部分的值：

點選下載範本：JS限制複選框（填报）選中個數範例二.cpt