JavaScript操作html元素

最新推荐文章于 2022-08-26 09:36:52 发布

自找苦吃，自得其乐

最新推荐文章于 2022-08-26 09:36:52 发布

阅读量804

点赞数

分类专栏： 11_js 文章标签： javascript html input function button action

本文链接：https://blog.csdn.net/tengdazhang770960436/article/details/7357883

版权

11_js 专栏收录该内容

98 篇文章 0 订阅

订阅专栏

 
<html>
<head>
    <script type="text/javascript">
        var Dada = {};
        Dada = {
            $:function (id) {
                return document.getElementById(id);
            },
            ok:function () {
                alert("i say it is ok...")
            },
            name:"haiyang"
        }

        //如果你无法找出JavaScript的错误的话，那么就尽可能的输出变量的值进行调试
        function getInfo() {
            //在定义一个数字类型的JavaScript变量的时候最好是给它指定初始值为0
            //定义一个字符串的变量的时候最好是为它赋予初始值为""否则就可能会出现undefined错误
            var countCheckBox = 0;
            var countRadio = 0;
            var favourites = "";
            var sex = "";
            var length = Dada.$("f2").elements.length;
            for (var i = 0; i < length; i++) {
                var e = Dada.$("f2").elements[i];
                //把type之后的东西换成你想要检测的input的属性你就可以对它们进行操作了
                if (e.type == "checkbox" && e.checked == true) {
                    //把节点的code记录起来
                    countCheckBox++;
                    favourites += e.value + "、";
                }
                if (e.type == "radio" && e.checked == true) {
                    countRadio++;
                    sex += e.value;
                }
            }

            alert("checkbox被选中了：" + countCheckBox + "次");
            alert("checkbox被选中了：" + countRadio + "次");
            alert("你的信息：\n" + "性别：" + sex + "\n" + "爱好：" + favourites);
            Dada.ok();
            alert(Dada.name);
        }

    </script>
</head>

<body id="f1">
<form action="test.html" id="f2" name="f2">
    您的性别：男：<input type="radio" checked="true" name="sex" value="男"/>
     女：<input type="radio" name="sex" value="女"><br>
    请选择你喜欢的运动：
    <br>
    <label for="check1">足球</label><input type="checkbox" id="check1" value="足球">
    <label for="check2">篮球</label><input type="checkbox" id="check2" value="篮球">
    <label for="check3">乒乓球</label><input type="checkbox" id="check3" value="乒乓球">
    <br>
    <input type="button" οnclick="getInfo()" id="btn1" value="获取您的信息">
</form>
</body>

</html>