表單中有關於愛好的多選框, 籃球,足球,游泳,跑步, 再有一個多選框,表明全選

時間 2019-12-14

原文原文鏈接

家庭做業javascript

籃球足球游泳跑步

<!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 runat="server">
    <title>家庭做業</title>
    <script src="jquery-3.1.1.js" type="text/javascript"></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="跑步"/>跑步
    <br/>
    <br/>
</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>

　　不明白啊不明白啊不明白html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。