<!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

jQuery - 获取爱好的更多相关文章

  1. jquery】常用的jquery获取表单对象的属性与值

    [jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...

  2. jquery获取dropdownlist的value和text值

    1.jquery //获取value值 $("#ddlSubmodel").val(); //获取text值 $("#ddlSubmodel").find(&q ...

  3. 用jQuery获取表单的值

    在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单 单行文字域:<input type=' ...

  4. Jquery获取select选中的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  5. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  6. jquery获取不到append出来的新元素的解决办法

    jquery获取不到append出来的新元素的解决办法 $('body').on("click","property",function(){}) jq1.7+ ...

  7. jQuery获取隐藏文本域

    [html] view plaincopyprint?//jquery获取隐藏域  <style type="text/css">  div{      width:1 ...

  8. js,jquery获取浏览器信息

    1.js获取: 查看:window.navigator 2.jQuery获取: chrome firefox 推荐使用navigator获取userAgent然后去正则匹配 参考匹配规则:http:/ ...

  9. 【转】jQuery获取Select option 选择的Text和Value

    获取一组radio被选中项的值:var item = $('input[name=items][checked]').val();获取select被选中项的文本:var item = $(" ...

随机推荐

  1. Mysql(三):多表查询和存储程序

    今天内容: ● 多表查询(内连接 外连接 子查询) ● 存储程序(存储过程 函数) 多表查询 ​ 同时从多张数据表中查取到需要的数据即是多表查询. 多表查询时,参与查询的表中每条数据进行组合,这种效果 ...

  2. tomcat生成catalina.out文件

    生成catalina.out方法 导语:本文为Windows下生tomcat将控制台信息输出到catalina.out文件  且 保证能实时查看日志文件的方法. 一.创建catalina.out 1. ...

  3. [Codeforces]Codeforces Round #489 (Div. 2)

    Nastya and an Array 输出有几种不同的数字 #pragma comment(linker, "/STACK:102400000,102400000") #ifnd ...

  4. fcc 响应式框架Bootstrap 练习3

    class="container-fluid"控制宽度100% <div class="container-fluid"> <h3 class ...

  5. H5 标签属性、input属性

    高亮文字: 全部商品只要<mark>6.18</mark> 结果:     加拼音文字: <ruby>變<rt>bian</rt></ ...

  6. html——ico

    下载: 网址+/favicon.ico 引用: 1.<link href="favicon.ico" rel="icon" /> 2.<lin ...

  7. CSS——padding

    padding是盒子内容与边框的距离. padding:10px;/*上下左右都是10px*/ padding:10px 20px;/*上下是10px 左右是20px*/ padding:10px 2 ...

  8. day10-函数基础知识

    函数 什么是函数 把工具事先准备好,然后下次使用的时候,直接使用就行了.我们的函数就是工具 为何用函数 1.遇到重复的功能只能重复编写实现代码,代码冗余 2.功能需要扩展时,需要找出所有实现该功能的地 ...

  9. 转录组入门(3)：了解fastq测序数据

    sra文件转换为fastq格式 fastq-dump -h --split-3 也就是说如果SRA文件中只有一个文件,那么这个参数就会被忽略.如果原文件中有两个文件,那么它就会把成对的文件按*_1.f ...

  10. GridView中的日期处理

    数字 {0:N2} 12.36  数字 {0:N0} 13  货币 {0:c2} $12.36  货币 {0:c4} $12.3656  货币  "￥{0:N2}"  ￥12.36 ...