動态生成複選框清單彈性盒子

效果圖

1.準備一塊盒子區域 id=“checkBoxList” 為例

//樣式的簡單介紹
style{
overflow:scroll; //讓超出div 内容在div區域内以滾動條形式呈現
display: flex;  //搞一個彈性盒子容器
flex-wrap: wrap;align-content: flex-start; // 文本對齊方式 這裡是上下元素的内容對齊
}
//這裡行内樣式舉例
<div id="checkBoxList" style="overflow:scroll;height:93%;
display: flex;flex-wrap: wrap;align-content: flex-start; width: 100%;
padding-left: 10px">

 //這塊區域待動态放複選框清單
 
</div>
           

2.準備一塊文本域 textArea

<textarea id="textAreaId" rows="16" cols="70" placeholder="請選擇複選框加載内容到此處..."
 style=" resize:none; font-size: 25px;font-family:'Microsoft YaHei';
 width: 100%;height: 100% ">這裡不要留白白，看完删掉此處，否則滑鼠不聚焦文本域左上方</textarea>
           

3.動态加載複選框清單項

這裡加載清單項不允許以 “、”分割，為後續分割符使用

//頁面初始化
$.parser.onComplete = function(res) {
	//頁面打開執行或者手動點選加載
	dynamicLoadCheckboxList()
}

function dynamicLoadCheckboxList() {
	//清空文本域内容
    document.getElementById("textAreaId").value='';
	//清空盒子裡内容
    $("#checkBoxList").html("");
    
    //背景請求複選框内資料清單  --簡單一個sql查詢語句
    $.post(BASE_PATH + "/xxxController/xxxxxxx.do", {}, function (res) {
        if (res.result == '200') {
          let  checkDataList= res.checkDataList;
            for(let j=0; j < checkDataList.length; j++ ){
            //在盒子中動态加載 checkbox元素清單
                $("#checkBoxList").append(
                    "<label style='font-size: 15px;width: 25%'>"
                    + "<input name='checkItem' type='checkbox'  value="
                    + checkDataList[j].checkName
                    + ">"
                    + checkDataList[j].checkName
                    +"</label>"
                );
                //每四個元素内容一行                
                if( (j+1) % 4 == 0){
                    $("#checkBoxList").append("<br>");
                }
            }     
        } else {
            showMessage(res.Msg);
        }
    }, "JSON");
}
           

4.對盒子内複選框清單項進行監聽

$("#checkBoxList").on('click', function () {
		//擷取文本域内容
		let textArea = "textAreaId";
		//複選框選擇勾選周遊每一項元素
		$("input[name=checkItem]:checkbox:checked").each(function () {
			//擷取目前周遊的複選框值  上邊代碼中input 内 value="checkName" 就是取這個value
			let str = $(this).val().toString();
			let flag = $(this).context.checked;//取複選框勾選狀态 這裡是true 
			selectCheckedHandle(flag,str,textArea);
		});
		
		//複選框取消勾選周遊每一項元素
		$("input[name=checkItem]:not(:checked)").each(function() {
			let deletestr = $(this).val().toString();
			unSelectUncheckedHandle(deletestr,checkIdArea);
		});
	});


//周遊選擇複選框處理
function selectCheckedHandle(flag,str,checkIdArea) {
    debugger
    let ele = document.getElementById(checkIdArea);
    let reg = /\s+/g;//去除空白區域
    if (typeof ele.value === 'string') {
        ele.value = ele.value.replace(reg, '');
    }
    if (ele.value.lastIndexOf('、') != ele.value.length -1){
        ele.value = ele.value+'、';
    }
    if (typeof str === 'string') {
        str = str.replace(reg, '');
    }

    if (flag) {
        if (str.length > 0) {
            if (ele.value.indexOf(str) == -1) {
                ele.value = ele.value.concat(str+'、');
            } else {
                let flag = undefined;
                let tempArr = ele.value.split("、");
                for (let i = 0; i < tempArr.length; i++) {
                    if (tempArr[i] == str) {
                        flag = true;
                        break;
                    }else {
                        flag = false;
                    }
                }
                if (flag == false){
                    ele.value = ele.value.concat(str+'、');
                }
            }
        }
    }
}

//周遊取消勾選複選框處理
function unSelectUncheckedHandle(deletestr,checkIdArea) {
    debugger
    let ele = document.getElementById(checkIdArea);
    let reg = /\s+/g;
    if (typeof ele.value === 'string') {
        ele.value = ele.value.replace(reg, '');
    }
    if (typeof deletestr === 'string') {
        deletestr = deletestr.replace(reg, '');
    }
    let deleteArr = ele.value.split("、");
    for (let i = 0; i < deleteArr.length; i++) {
        if (deleteArr[i] == deletestr) {
            deleteArr.splice(i,1);
            ele.value = deleteArr.join("、");
        }
    }
}
           

5.解釋字元串處理常用方法無效

為什麼沒用search()，match(),lastIndexOf()??

因為這些隻能查找字元串的子元素的首個位置或者下标位置，但是不容易查找第二個，或許可以搭配正規表達式，進行完全比對是否是尋找的那個複選框内容，如果不是，可以繼續，但是不能确定找到的第二個長度是多長，是以用了數組分割

簡單說沒有使用好正規表達式,下面是我的思路未解全....後續有空再說

dynamicStr   //為複選框所攜帶的字元串内容
//首個下标  
 let currentLocat  =  str.indexOf(dynamicStr)  
// 用正則表達比對，如果是false,繼續下一個
while(!RegExp("^" + 'dynamicStr' + "$").test('dynamicStr')){//false的話繼續
    currentLocat = str.indexOf(dynamicStr,currentLocat+1);
    if(currentLocat >-1){
//       繼續正則比對  
	}
}
           

生成動态正規表達式 RegExp方法

生成動态 /^dynamicStr$/

console.log( RegExp("^" + 'dynamicStr' + "$"))
//舉例
console.log(RegExp("^" + 'dynamicStr' + "$").test('dynamicStr')) //true