输出选中的复选框的个数(引自锋利的jQuery)

浏览数：25 / 时间：2015年06月09日

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="editplus" />
    <title>输出选中的复选框的个数</title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <!--
        思路：
        1. 新建一个空数组。
        2. 获取所有name为"check"的多选框。
        3. 循环判断多选框是否被选中，如果被选中则添加到数组里。
        4. 获取输出按钮，然后为按钮添加onclick事件，输出数组长度即可。
    -->
</head>
<body>
    <input type="checkbox" value="1" name="check" checked="checked" />
    <input type="checkbox" value="2" name="check" />
    <input type="checkbox" value="3" name="check" />
    <input type="checkbox" value="4" name="check" checked="checked" />
    <input type="button" value="你选中的个数" id="btn" />
    <script type="text/javascript">
        //传统方法：
        //var btn = document.getElementById("btn");  //获取id为btn的元素(button)
        //btn.onclick = function ()                      //给元素添加onclick事件
        //{
        //    var arrays = new Array();               //创建一个数组对象
        //    var items = document.getElementsByName("check"); //获取name为check的一组元素(checkbox)
        //    for (var i = 0; i < items.length; i++)         //循环这组数据
        //    {
        //        if (items[i].checked)                //判断是否选中
        //        {
        //            arrays.push(items[i].value);    //把符合条件的数据添加到数组中
        //            //push(）是JavaScript数组中的方法
        //        }
        //    }
        //    alert("选中的个数为：" + arrays.length);
        //}

        //jQuery方法：
        $(‘#btn‘).click(function () {
            var length = $("input[name=‘check‘]:checked").length;
            //先使用属性选择器，然后用表单对象属性过滤，最后获取jQuery对象的长度
            alert("选中的个数为：" + length);
        })
    </script>
</body>
</html>