动态生成复选框列表弹性盒子

原创已于 2023-02-17 17:44:43 修改 · 932 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #CheckBox

于 2023-02-17 17:15:22 首次发布

前端web 同时被 2 个专栏收录

11 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript和jQuery动态加载复选框列表，同时监听复选框状态，将选中的内容实时同步到文本域中，利用CSS控制布局，以及在处理字符串时避免使用某些字符串方法的原因和动态正则表达式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

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