js实现点击“查看我选择的爱好”按钮,在下方显示已选择的爱好,要求使用jQuery选择器的方式来选取元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jq\jquery-1.8.3.js"></script>
</head>
<body>
<h1>选择你的爱好</h1>
<ul>
    <li><input type="checkbox" class="love" value="音乐">音乐</li>
    <li><input type="checkbox" class="love" value="登山">登山</li>
    <li><input type="checkbox" class="love" value="游泳">游泳</li>
    <li><input type="checkbox" class="love" value="阅读">阅读</li>
    <li><input type="checkbox" class="love" value="打球">打球</li>
    <li><input type="checkbox" class="love" value="跑步">跑步</li>
    <li><input type="checkbox" class="love" value="其他">其他</li>
    <hr/>
    <li><input type="button" value="查看我选择的爱好" id="info"></li>
    <span id="p"></span>
</ul>
</body>
<script type="text/javascript">
    $(function(){
       var info = $("#info");
        var love = $(".love");
        info.click(function(){
                    love.each(function(i){
                        if(love[i].checked==true){
                           var content=love[i].value;
                            var xx=$("<p></p>");
                              xx.text(content);
                              $("#p").append(xx);
                        }
                    });
        });
    });
</script>
</html>

猜你喜欢

转载自blog.csdn.net/Shi_Yuan_Csdn/article/details/82084774
今日推荐