checkbox选择 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="HTMLPage9.htm">
        <fieldset>
            <legend>你最爱的运动是</legend>
            <input type="checkbox" name="items" id ="足球" value="足球"/>
            <label for="足球">足球</label>
            <input type="checkbox" name="items" id ="篮球" value="篮球"/>
            <label for="篮球">篮球</label>
            <input type="checkbox" name="items" id ="羽毛球" value="羽毛球"/>
            <label for="羽毛球">羽毛球</label>
            <input type="checkbox" name="items" id ="乒乓球" value="乒乓球"/>
            <label for="乒乓球">乒乓球</label><br />
            <input type="button" id="CheckAll" value="全 选" />
            <input type="button" id="CheckNo" value="全不选" />
            <input type="button" id="CheckRev" value="反 选" />
            <input type="button" id="send" value="提 交" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#CheckAll").click(function () {
                $("[name=items]:checkbox").attr("checked", true);
            });
        })
        $(function () {
            $("#CheckNo").click(function () {
                $("[name=items]:checkbox").attr("checked", false);
            });
        })
        $(function () {
            $("#CheckRev").click(function () {
                $("[name=items]:checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
        })
        $(function () {
            $("#send").click(function () {
                var str = "你选中的是：\r\n";
                $("[name=items]:checkbox").each(function () {
                    if ($(this).attr("checked")) {
                        str += $(this).val() + "\r\n";
                    }
                });
                alert(str);
            });
        })
    </script>

</body>
</html>

posted @ 2016-06-28 15:26  Chris_在IT道路上前行  阅读(192)  评论(0)    收藏  举报