多组复选框选中获取

先来看一下展示效果

代码如下:

<html >
<head>
    <title>多组复选框选中获取</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <style>
        ul, li{list-style: none}
    </style>
<body>
<div>
    <ul>
        <li>1.
            <input type="checkbox" name="s1"  checked value="1">1
            <input type="checkbox" name="s1"  value="2">2
            <input type="checkbox" name="s1"  value="3">3
            <input type="checkbox" name="s1"  value="4" checked>4
        </li>
        <li>2.
            <input type="checkbox" name="s2"  value="1" checked>1
            <input type="checkbox" name="s2"  value="2" checked>2
            <input type="checkbox" name="s2" id="" value="3" checked>3
            <input type="checkbox" name="s2" value="4" checked>4
        </li>
        <li>3.
            <input type="checkbox" name="s3" value="1">1
            <input type="checkbox" name="s3"  checked value="2">2
            <input type="checkbox" name="s3"  value="3">3
            <input type="checkbox" name="s3"  value="4">4
        </li>
    </ul>
</div>
<div>选中结果如下</div>
<div class="allText"></div>
<script src="jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        var check_value =[];
        $('ul li').each(function(){
            var str=[];
            $(this).find(':checkbox:checked').each(function(){
                str.push(this.value);
            });
            check_value.push(str)
        });

        var check_text=[]
        for(var i=0;i<check_value.length;i++){
            check_text+=(i+1)+""+check_value[i]+`<br/>`
            $(".allText").html(check_text)
        }


    })
</script>
</body>
</html>

 

posted @ 2019-07-15 10:20  珊珊家的小孩  阅读(789)  评论(0编辑  收藏  举报