网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery each()函数使用实例方法

2021/9/30 21:13:15

jQuery提供了each()方法用于遍历匹配的元素信息。以每一个匹配的元素作为上下文来执行一个函数。 返回 false 将停止循环。返回 true 跳至下一个循环。 接下来我们使用jQuery的 each() 方法,遍历选中复选框的值。<!DOCTYPE html><html><head> …

        jQuery提供了each()方法用于遍历匹配的元素信息。以每一个匹配的元素作为上下文来执行一个函数。 返回 'false' 将停止循环。返回 'true' 跳至下一个循环。

        接下来我们使用jQuery的 each() 方法,遍历选中复选框的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery each()函数使用实例方法—www.woaidaogu.com</title>
    <meta name="author" content="我的博客">
</head>
<body>
    <h3>你最想去旅行的地方:</h3>
    <input type="checkbox" name="checkItem" value="1"/>万宁<br>
    <input type="checkbox" name="checkItem" value="2"/>额济纳<br>
    <input type="checkbox" name="checkItem" value="3"/>扎尕那<br>
    <input type="checkbox" name="checkItem" value="4"/>稻城亚丁<br>
    <input type="checkbox" name="checkItem" value="5"/>阿里<br>
<input type="checkbox" name="checkItem" value="6"/>伊犁<br>
<input type="checkbox" name="checkItem" value="7"/>山王坪<br>
<input type="checkbox" name="checkItem" value="8"/>阿里<p>
    <input type="button" value="提交" id="btnSubmit"/>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        //提交
        $("#btnSubmit").click(function()
        {
            //用户编号数组
            var idArray = new Array();
 
            //使用each()方法,遍历选中的用户编号
            $("[name=checkItem]:checkbox:checked").each(function(index){
                idArray.push($(this).val());
            });
 
            //打印结果
            console.log("您选择共:" + idArray.length + "条数据!")
            console.log(idArray);
        });
    });
</script>
</html>

        执行结果:

image.png

        当点击提交按钮后,控制器输出的信息如下图:


image.png

        通过以上内容我们知道了jQuery each()函数的使用方法,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...