jQuery - 获取爱好

最新推荐文章于 2020-08-30 22:00:20 发布
最新推荐文章于 2020-08-30 22:00:20 发布
阅读量171 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xtdxs/p/6613915.html
版权

 

<!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>
获取爱好.html

 

转载于:https://www.cnblogs.com/xtdxs/p/6613915.html

weixin_33897722
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现点击“查看我选择的爱好”按钮，在下方显示已选择的爱好,要求使用jQuery选择器的方式来选取元素
Shi_Yuan_Csdn的博客
08-26 5020
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;&lt;/title&gt;     &lt;script type="text/javascript" src="jq\
JavaScript学习练习程序DOM——爱好选择
xzp_12345的博客
08-22 1508
效果图： 相关代码如下： 全选、反选 window.onload=function() { //全选/全不选 document.getElementById("selectDeSelectAll").onclick=function() { var hobbys = document.getElementsByName("hobby");
jQuery实现选择爱好器功能
qq_44604924的博客
08-30 344
描述：点击按钮实现全选或全不选功能。 具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery选择练习</title> <script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script> <sc
原生JS实现表单checkbook获取已选择的值
10-27
本文为大家介绍下采用原生JS实现从一个表单checkbox获取到已选中的数据值，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
原生JavaScripts/jQuery--爱好选择器
qq_45679015的博客
08-27 842
<form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox" /> 全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="c.
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate3.4版本
05-17
jquery-migrate3.4版本
开发工具 jquery-1.11.3.min
05-31
开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-1.9.1.js
09-07
jquery-1.9.1版本
jQuery练习
weixin_33928137的博客
05-19 85
jQuery练习 练习一：爱好选择器 $(function () { //1.点击全选 var $checkedAllBox = $('#checkedAllBox') var $checkedAllBtn = $('#checkedAllBtn') var $items = $...
JS在HTML中获取到所有选中的checkbox的值
04-21 901
思路： 1.所有的checkbox的name取一致的值， 2.通过name获取到一个对象的集合 id， 3.遍历这个集合，如果其中一个是checked 4.就将checked的数据添加到我们的array中 5.集合是以英文逗号,分割的value值的集合 ，JS代码 var id = document.getElementsByName('rights'); ...
HTML页面从JS获取数据
jazefe的专栏
04-11 2万+
最近在写网页，遇到了好多问题，慢慢解决并且记录。 HTML从JS获取数据，方法有很多 例如 document.getElementById("bar").innerHTML = "Test";或者 var Value = "Test" var oDiv = document.getElementById("div"); oDiv.innerHTML = Value; 但是我却都用
用javascript：实现隔行变色
Shi_Yuan_Csdn的博客
08-23 749
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table align=&
jquery 取值汇总
NumberBB的博客
11-23 298
jquery 根据name取值:$("input[name='XMGLZY']").val(); 取父窗口值: var workfolwmiji=$("input[type=radio][checked]",window.parent.document).val(); var t=$("input[type=radio][name='RATIO'][checked]").val();  //取...
jQuery练习1--爱好选择器
weixin_42139212的博客
12-09 299
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" h
JQ查找与过滤实现爱好选择器
Hemx的博客
05-22 180
爱好选择器 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全选练习</title> </
jQuery个人信息注册表
最新发布
12-08
以下是一个简单的jQuery个人信息注册表的例子： ```html <!DOCTYPE html> <html> <head> <title>个人信息注册表</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#submit").click(function(){ var name = $("#name").val(); var age = $("#age").val(); var gender = $("input[name='gender']:checked").val(); var hobbies = []; $("input[name='hobbies']:checked").each(function(){ hobbies.push($(this).val()); }); var info = { "name": name, "age": age, "gender": gender, "hobbies": hobbies }; console.log(info); }); }); </script> </head> <body> <form> <label for="name">姓名：</label> <input type="text" id="name"><br> <label for="age">年龄：</label> <input type="text" id="age"><br> <label>性别：</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女<br> <label>爱好：</label> <input type="checkbox" name="hobbies" value="reading">阅读 <input type="checkbox" name="hobbies" value="music">音乐 <input type="checkbox" name="hobbies" value="sports">运动<br> <input type="button" id="submit" value="提交"> </form> </body> </html> ``` 该注册表包含姓名、年龄、性别和爱好四个字段。当用户点击提交按钮时，jQuery会获取表单中的值，并将其存储在一个JavaScript对象中。最后，该对象将被打印到浏览器的控制台中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值