jQuery - 获取爱好

最新推荐文章于 2022-08-15 19:08:39 发布

weixin_33897722

最新推荐文章于 2022-08-15 19:08:39 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xtdxs/p/6613915.html

本文介绍了一个简单的HTML页面，该页面使用jQuery来收集用户通过复选框选择的爱好，并在按钮点击时显示这些已选择的爱好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html  >
<html>
<head>
    <title>  获取爱好 </title>
    <meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
</head>

<body>
<form id="myForm">
    <h3>选择你的爱好：</h3>
    <ul id="hobby">
        <li><input type="checkbox" value="音乐" />音乐</li>
        <li><input type="checkbox" value="登山" />登山</li>
        <li><input type="checkbox" value="游泳" />游泳</li>
        <li><input type="checkbox" value="阅读" />阅读</li>
        <li><input type="checkbox" value="打球" />打球</li>
        <li><input type="checkbox" value="跑步" />跑步</li>
        <li><input type="checkbox" value="其他" />其他</li>
    </ul>
    <hr/>
    <ul>
        <li><input type="button" value="查看我选择的爱好" /></li>
    </ul>
    <p id="text"></p>

</form>
<script type="text/javascript">
    $(function(){
        $(":button").click(function(){
            var value = "";
            /*$(":checkbox:checked").each(function() {
             value += $(this).val() + "<br/>";
             });*/
            var $hobbies = $(":checkbox:checked");
            for (var i = 0; i < $hobbies.length; i++) {
                value += $hobbies[i].value + "<br/>";
            }
            $("#text").html(value);
        });
    });
</script>

</body>
</html>