jquery如何获取动态添加的复选框中的值

首先在

  • 中利用append添加复选框

    img


    现在如何利用jquery获取其中选中的值


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset='utf-8'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div>
            <div class="l1212"></div>
            <button onclick="getChecked()">获取选中的值</button>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            var data = {
                l: [1,2,3,4],
                l1: ['id1','id2','id3','id4']
            }
            for(var i=0;i<data.l.length;i++){
                let d='<li>'+'<input type="checkbox" name="'+data.l[i]+'" id="'+data.l1[i]+'" value="'+data.l[i]+'" />'+data.l[i]+'</li>'
                $(".l1212").append(d)
            }

            function getChecked() {
                var checkedList = $(".l1212 input:checked")
                var arr = []

                Array.prototype.forEach.call(checkedList, function(item) {
                    arr.push(item.value)
                })
                console.log('选中：', arr)
            }
        </script>

    </body>

</html>

解决方法

或许你可以这样，
1、在append元素的时候，在元素内部加一个id属性，id的值的话为 循环里的i，或者看你自己需求自己设置，注意有规律不重复就行
2、这样再利用Jquery获取这个元素的时候就直接根据id获取就行

$("#id")

不知道这样设计是否满足你的需求

如有问题及时沟通

var obj=document.getElementsById('test');
其中test是id。
或者
$("#test")

var checkdArray = function(){
var arry = new Array();
//循环所有选中的值
$('input[name="多选框的name值"]:checked').each(function(index, element) {
//追加到数组中
arry.push($(this).val());
});
//将数组元素连接起来转化为字符串
var arrystr = arry.join(',');
//输出到控制台
console.log("选中值："+ arrystr);
}

可以参考如下链接https://www.cnblogs.com/yuan9580/p/14966377.html

可以把他加到form表单里面，直接序列化

img

img

img