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)
说明:
each循环逐个读取name=sport的复选框- 判断复选框是否勾选,勾选则count+1
- 循环结束后弹出选中总数
Previous: 练习一下-左右勾选框的全选 反选的功能
Next: 动态创建Dom节点