jquery如何获取用户表单提交值

最新推荐文章于 2022-10-26 10:24:13 发布

w86wh2

最新推荐文章于 2022-10-26 10:24:13 发布

阅读量1.2k

点赞数 1

文章标签：表单 jquery

本文链接：https://blog.csdn.net/w86wh2/article/details/51734542

版权

表单在用户交互中用到的很频繁，我们有几种方法可以获得用户表单输入值

1.获取方法：

<html>
<head>
<meta charset="utf-8">
<title>表单过滤器</title>
<script src="jquery.js"></script>
</head>
<body>
<form action="#" method="get">
用户名：<br>
<input type="text" name="aa"><br>
性别：<br>
<input type="radio" name="bb" value="男">男
<input type="radio" name="bb" value="女">女<br>
学历：<br>
<input type="radio" name="cc" value="小学">小学
<input type="radio" name="cc" value="中学">中学
<input type="radio" name="cc" value="大学">大学
<input type="radio" name="cc" value="研究生">研究生<br>
爱好：<br><input type="checkbox" name="dd" value="吃饭">吃饭
<input type="checkbox" name="dd" value="睡觉">睡觉
<input type="checkbox" name="dd" value="打豆豆">打豆豆 <br>
所在城市：<br>
<select name="ee">
<option value="武汉">武汉</option>
<option value="杭州">杭州</option>
<option value="河源">河源</option>
</select>
<br> <input type="button" value="点击" οnclick="fun1();"></form>
<script>
$(function(){
$(":button").css({"width":"100%","height":"80px"});
$(":button").click(function(){
// alert($(":checkbox:checked").val())
document.write("用户名："+$(":text").val()+"<br>性别:"+$(":radio[name='bb']:checked").val()+"<br>学历："
+$(":radio[name='cc']:checked").val()+"<br>爱好："+$(":checkbox:checked").val()+"<br>来自："+$(":selected").val())

});
});
</script>
</body>
</html>
单选信息value值都能获取，但是多选框只能获取我选择的第一个checked值

那我们来研究如何获取多选框中的数值

1.常规for循环：

复选框选中返回的是一个数组。默认返回下标为0的对象。想要获取多个选中的。可以参考一下代码
$(function(){
        $(":button").css({"width":"100%","height":"80px"});
        $(":button").click(function(){
            var str="爱好：";
            var checked_arr=$(":checkbox:checked");
            for(var i=0;i<checked_arr.length;i++){
                if(i==checked_arr.length-1){
                    str=str+$(checked_arr[i]).val();
                }else{
                    str=str+$(checked_arr[i]).val()+",";
                }
            }

            document.write("用户名："+$(":text").val()+"<br>性别:"+$(":radio[name='bb']:checked").val()+"<br>学历："
                    +$(":radio[name='cc']:checked").val()+"<br>爱好："+str+"<br>来自："+$(":selected").val())

        });
    });

2.使用each函数或者map函数进行遍历：

var str=""
$(":checkbox:checked").each(function(index){
str=str+this.value+","
})
// alert(str)
// alert($(":checkbox:checked").val())
document.write("用户名："+$(":text").val()+"<br>性别:"+$(":radio[name='bb']:checked").val()+"<br>学历："
+$(":radio[name='cc']:checked").val()+"<br>爱好："+str+"<br>来自："+$(":selected").val())