选择所有checkbox 并且打√

最新推荐文章于 2020-02-04 14:52:00 发布

转载最新推荐文章于 2020-02-04 14:52:00 发布 · 368 阅读

面试专栏收录该内容

54 篇文章

订阅专栏

本文档提供了一个简单的示例，展示了如何利用jQuery来操作网页上的复选框组，实现全选、全不选、反选及提交选择的功能。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

<script type="text/javascript"  src="../js/jquery.min.js"></script>
     <script type="text/javascript">
        $(function () {


            // 全选
            $("#btnCheckAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", true);
            });

            // 全不选
            $("#btnCheckNone").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", false);
            });

            // 反选
            $("#btnCheckReverse").bind("click", function () {
                $("[name = chkItem]:checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });

            // 全不选
            $("#btnSubmit").bind("click", function () {
                var result = new Array();
                $("[name = chkItem]:checkbox").each(function () {
                    if ($(this).is(":checked")) {
                        result.push($(this).attr("value"));
                    }
                });

                alert(result.join(","));
            });
        });
    </script>
</head>
<body>
    <div>
        <input name="chkItem" type="checkbox" value="今日话题" />今日话题
        <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
        <input name="chkItem" type="checkbox" value="财经" />财经
        <input name="chkItem" type="checkbox" value="汽车" />汽车
        <input name="chkItem" type="checkbox" value="科技" />科技
        <input name="chkItem" type="checkbox" value="房产" />房产
        <input name="chkItem" type="checkbox" value="旅游" />旅游
    </div>
    <div>
        <input id="btnCheckAll" type="button" value="全选" />
        <input id="btnCheckNone" type="button" value="全不选" />
        <input id="btnCheckReverse" type="button" value="反选" />
        <input id="btnSubmit" type="button" value="提交" />
    </div>
</body>
</html>