jQuery练习t33

最新推荐文章于 2021-03-11 15:31:07 发布

虾米大王

最新推荐文章于 2021-03-11 15:31:07 发布

阅读量274

点赞数

分类专栏： JavaScript jQuery 文章标签： jquery js

本文链接：https://blog.csdn.net/modern358/article/details/112368740

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .iframe {
            border: 1px solid #888888;
            font-size: 13px;
        }
        .title {
            padding: 6px;
            background-color: #EEEEEE;
        }
        .content {
            padding: 8px;
            font-size: 12px;
        }
        .tip {
            background-color: #EEEEEE;
            display: none;
            font-size: 12px;
            padding: 8px;
        }
        .txt {
            border: 1px solid #888888;
        }
        .btn {
            border: 1px solid #888888;
            width: 60px;
        }
        .w260 {width: 260px;}
    </style>
    <script>
        function btn_click() {
            var txt1 = document.getElementById('text1').value;
            var rdoValue = (radio1.checked)?"男":"女";
            var chkValue = (checkbox1.checked)?"已婚":"未婚";
            var tip1 = document.getElementById('tip');
            tip1.style.display = "block";
            tip1.innerHTML = txt1 + "<br>" + rdoValue + "<br>" + chkValue;
        }
    </script>
</head>
<body>
    <div class="iframe">
        <div class="title">请输入如下信息：</div>
        <div class="content">
            姓名：<input type="text" id="text1" class="txt"><br>
            性别：<input type="radio" id="radio1" name="rdoSex" value="男">男
            <input type="radio" id="radio2" name="rdoSex" value="女">女<br>
            婚否：<input type="checkbox" id="checkbox1"><br>
            <input type="submit" id="btnSubmit" value="提 交" class="btn" onclick="btn_click()"><br>
        </div>
        <div id="tip" class="tip"></div>
    </div>
</body>
</html>