遍历元素 each函数

each()用来遍历一组匹配到的DOM元素,为每一个元素执行回调函数;回调内部使用$(this)获取当前遍历到的元素。

练习需求:统计被勾选的复选框总数量。 核心代码:

var count = 0;
$('input[name=sport]').each(function () {
    if ($(this).attr("checked") == 'checked') {
        count++;
    }
});
alert(count);
Code language: JavaScript (javascript)

完整aspx页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm20.aspx.cs" Inherits="WebApplication1.WebForm20" %>

<!DOCTYPE html>

<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnCount').click(function () {
                var count = 0;
                $('input[name=sport]').each(function () {
                    if ($(this).attr("checked") == 'checked') {
                        count++;
                    }
                });
                alert("选中数量:" + count);
            });
        });
    </script>
</head>
<body>
    <h2>你喜欢的运动</h2>
    <input type="checkbox" name="sport" value="football" />足球<br />
    <input type="checkbox" name="sport" value="ymq" />羽毛球<br />
    <input type="checkbox" name="sport" value="basketball" />篮球<br />
    <input type="checkbox" name="sport" value="ppq" />乒乓球<br />
    <input type="checkbox" name="sport" value="wq" />网球<br />
    <input type="button" id="btnCount" value="统计选中数量" />
</body>
</html>
Code language: HTML, XML (xml)

说明:

  1. each循环逐个读取name=sport的复选框
  2. 判断复选框是否勾选,勾选则count+1
  3. 循环结束后弹出选中总数

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注