首页 > 代码库 > 输出选中的复选框的个数(引自锋利的jQuery)

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

<!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>