勾选checkbox，并把勾选的值显示在某个div中

 <!DOCTYPE html  >

 <html>

 <head>

     <meta charset="UTF-8">

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

     <script type="text/javascript" >

         $(document).ready(function(){

             //全选

             $("input[name='quanxuan']").click(function(){

                 $("input[type='checkbox']").attr("checked","checked");

             });

             //取消

             $("input[name='quxiao']").click(function(){

                 $("input[type='checkbox']").removeAttr("checked");

             });

             //查看我的爱好

             $("input[type='button']").click(function(){

                 //获取所有checkbox

                 var str="";

                 $("input[type='checkbox']:checked").each(function(){

                     str +=$(this).val()+"<br/>";

                     $("#text").html(str);

                 });

             });

         })

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

     <input type="button" name="quanxuan" value="全选"/>

     <input type="button" name="quxiao" value="全取消"/>

     <hr/>

     <ul>

         <li><input type="button" value="查看我选择的爱好" /></li>

     </ul>

     <p id="text"></p>

 </form>

 <script type="text/javascript">

 </script>

 </body>

 </html>

jquery获取复选框的值的更多相关文章

  1. 《jquery权威指南2》学习笔记------ jquery获取复选框的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  3. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  4. 获取url中的参数\+发送ajax请求根路径|+获取复选框的值

    //获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  5. 使用js获取复选框的值,并把数组传回后台处理，过程使用的是Ajax异步查询

    这是界面代码: ​ function shua(){             var id_array=new Array();         $('input[id="checkAll& ...

  6. jquery获取复选框（checkbox）的选中值（一组和单个）

    使用jquery获取一组或者单个checkbox的选中状态的值.下面通过一个示例进行说明,假设现有一页面有一组checkbox的name的值为id,那么获取这组name=id的checkbox的值的方 ...

  7. jQuery获取复选框选中的每一个值

    $('input[name="serviceMode"]:checked').each(function(){ this.attr('value') });

  8. jquery获取复选框

    Html代码: <input type="checkbox" name="chekItem" /> checkbox1 <br /> & ...

  9. 原生js获取复选框的值

    ​​ obj = document.getElementsByName("dk_tj"); var longtxt = ""; for (k in obj) { ...

随机推荐

  1. Bootstrap系列 -- 44. 分页导航

    带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在B ...

  2. js队列

    用指针和数组模拟基本队列 http://blog.csdn.net/zhuwq585/article/details/53177192 js下的事件队列,或者异步队列 http://www.jb51. ...

  3. [POJ2104]K-th Number

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 34048   Accepted: 10810 Ca ...

  4. MVC 中的 ispostback

    总之呢就是在MVC中试下 ispostback那种效果, 环境就是:登录验证loinger, if (Request.HttpMethod == "POST"){} 没理解透彻 源 ...

  5. 各组对final发布产品的排名

    结果 排名 组名 项目简称 组长 平均 方差 1 新蜂 俄罗斯 武志远 2 0.80 2 天天向上 连连看 王森 2.50 1.90 3 奋斗吧兄弟 食物链 黄兴 2.83 0.97 4 金洲勇士 考 ...

  6. Android 之px于dp在Java代码中的转换

    现在由于用到了,使用代码进行动态布局,所以需要进行px于dp之间的转换. 现将其封装为方法,以便于调用. public int DpToPx(Context context,float dp){ fl ...

  7. elasticsearch installation guide

    UBUNTU 14.04 LTS 安装 elasticseach同步MYSQL表并实现中文搜索 ==================================================== ...

  8. IntelliJ_设置

    1.修改背景色.修改字体大小 http://blog.csdn.net/hpf911/article/details/16888797 2.显示行号 搜索Line Number 3.代码结构图 Vie ...

  9. 【BZOJ 3672】【UOJ #7】【NOI 2014】购票

    http://www.lydsy.com/JudgeOnline/problem.php?id=3672 http://uoj.ac/problem/7 链上的情况可以用斜率优化dp.树上用斜率优化d ...

  10. 最小topK问题