JQuery 获取选中多选框的value,合并成字符串传给后台

简介: JQuery 获取选中多选框的value,合并成字符串传给后台
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>JQuery 获取选中多选框的value,合并成字符串传给后台</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div class="leftType">
            <p>
                <input name="person" type="checkbox" value="1" checked='checked' />员工
            </p>
            <p>
                <input name="person" type="checkbox" value="2" checked='checked' />访客
            </p>
            <p>
                <input name="person" type="checkbox" value="3" checked='checked' />车辆
            </p>
            <p>
                <input name="person" type="checkbox" value="4" checked='checked' />承包商
            </p>
        </div>
        <button type="submit" id="submit">提交</button>
    </body>
    <script type="text/javascript">
        $("#submit").click(function() {
            //JQuery 获取选中多选框的value,合并成字符串传给后台
            //定义一个空数组存储
            var arr = [];
            //根据name的值获取到所有选中checkbox,并遍历
            $(".leftType input:checkbox[name='person']:checked").each(function(i) {
                //arr.push($(this).val());
                arr[i] = $(this).val();
            });
            console.log(arr);
            // 将数组合并成字符串
            arrType = arr.toString();
            alert(arrType);
            $.ajax({
                url: "/location/personsByType",
                data: {
                    //type : '1,2,3,4,',    
                    type: arrType,
                },
                type: "GET",
                success: function(data) {},
                error: function(err) {
                    console.log(err);
                }
            })
        })
    </script>
</html>
相关文章
|
2月前
|
JavaScript 前端开发 数据处理
jquery 字符串转数字
通过这些方法和技巧,我们可以灵活地处理字符串数据,确保它们能被正确地转换为数字类型,从而在JavaScript程序中进行有效利用。对于更复杂的数据处理需求,考虑使用正则表达式或自定义逻辑来增强转换的灵活性和准确性。欲知更多高级处理技巧和实战案例,推荐访问,那里有丰富的教程和解决方案,助您在编程之路上更进一步。
23 0
|
JavaScript 前端开发
JQuery 获取选中多选框的value,合并成数组传给后台
JQuery 获取选中多选框的value,合并成数组传给后台
43 0
|
JavaScript
jquery提取字符串中的数字或非数字
jquery提取字符串中的数字或非数字
84 0
|
XML JavaScript 数据格式
JQuery 动态XML字符串添加节点
今天实现了动态的给一个XML字符串添加节点。
151 0
|
前端开发 JavaScript
ajax(jquery)前后台传数组(Springmvc后台)
ajax(jquery)前后台传数组(Springmvc后台)
176 0
ajax(jquery)前后台传数组(Springmvc后台)
|
JavaScript
jQuery $.merge()方法合并数组
jQuery $.merge()方法合并数组
145 0
jQuery $.merge()方法合并数组
|
JavaScript
jquery获取多个相同name的input的value值
jquery获取多个相同name的input的value值
|
9天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
47 21
|
10天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
41 16