[JavaScript知识库]纯html中借助jquery监听checkbox select

checkbox 界面数据循环、监听

    var getDeviceInfo = ctx + "/url..."
    $.get(getDeviceInfo, (e) => {
        var carList = JSON.parse(e).deviceInfo
        for (let i = 0; i < carList.length; i++) {
            var optionStr = "<label style='margin: 3px 6px;padding: 2px;' className='check-box'><input type='checkbox' value='"  
            + carList[i].selectValue + "' οnclick='checkChangeO()'>" + carList[i].selectLabel + "</label>"
            $("#deviceCheck").append(optionStr)
        }
        //设置默认值
        $('#device').val(carList[0]?.selectValue)
        checkChangeO()//点击第一次不成功的 解决QAQ
    })

    function checkChangeO() {
        //获取层中所有的checkbox 注册单击事件
        $("#deviceCheck input[type=checkbox]").click(function () {
            //获取div下选中的 checkbox
            var cks = $("#deviceCheck :checked");//属性过滤器
            var leng = cks.length;//获取div下选中的 checkbox个数
            var arr = []; //用户存放checkbox的value
            //便利循环所有选中的 checkbox
            cks.each(function (k, v) {  //k索引，v是对象
                //把选中checkbox的value 存放起来
                arr[arr.length] = $(v).val();
            });
            var needDeviceIds = arr.join(",");
            console.log(needDeviceIds,"选中的设备id")
            $("#device").val(needDeviceIds)
        })
    }

select 界面数据循环、监听

    var getUnitsInfo = ctx + "/oa/getInfo/dept"
    $.get(getUnitsInfo, (e) => {
        var carList = JSON.parse(e).deptInfo
        for (let i = 0; i < carList.length; i++) {
            var optionStr = "<option value='" + carList[i].selectValue + "'>" + carList[i].selectLabel + "</option>"
            $("#unitsSelect").append(optionStr)
        }
        //设置默认值
        $('#units').val(carList[0]?.selectValue)
    })

    $('#unitsSelect').on('change', (e) => {
        var select = $('#unitsSelect option:selected')
        console.log(select.text(), select.val())
        $("#units").val(select.val())
    })