勾选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. 发布新博客皮肤red_autumnal_leaves

    感谢sevennight为大家精心设计了一款博客皮肤——red_autumnal_leaves! [名称] red_autumnal_leaves[标题] 红叶[设计者] sevennight[简介] ...

  2. 深入理解计算机系统（4.1）---X86的孪生兄弟，Y86指令体系结构

    引言 各位猿友们好,计算机系统系列很久没更新了,实在是抱歉之极.新的一年,为了给计算机系统系列添加一些新的元素,LZ将其更改为书的原名<深入理解计算机系统>.这本书非常厚,而且难度较高,L ...

  3. Windows Azure 云服务角色架构

    当我们使用VS发布一个Cloud Service或者在Portal上上传发布包后,就能启动和运行一个云服务,可以保护WebRole,WorkerRole的一个或者多个实例. Windows Azure ...

  4. [BZOJ1193][HNOI2006]马步距离（贪心+dfs)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1193 分析: 首先小范围可以直接暴力.(其实只要用上题目中的表就行了) 如果范围比较大 ...

  5. matlab 画图中线型及颜色设置

    matlab受到控制界广泛接受的一个重要原因是因为它提供了方便的绘图 功能.本章主要介绍2维图形对象的生成函数及图形控制函数的使用方 法,还将 简单地介绍一些图形的修饰与标注函数及操作和控制MATLA ...

  6. 非常实用的jquery版表单验证

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  7. 云平台 为什么推荐使用小VM 而不是大VM独占宿主机的方式部署游戏服？

    近期公司X游戏项目,提了一个游戏VM资源的需求,是 64GB RAM + 30Core CPU 的VM规格,而一个VM部署10个游戏服.而我们云平台推荐的VM规格为 4 Core CPU + 4GB ...

  8. 设计模式之UML类图的常见关系

    设计模式之UML类图的常见关系 本文来自转载 烧点饭博客 本篇会讲解在UML类图中,常见几种关系: 泛化(Generalization),依赖(Dependency),关联(Association), ...

  9. VMWare虚拟机提供的桥接、nat和主机模式的区别

    虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host-Only 哪一种网络是适合自己的虚拟 ...

  10. 02python算法-递推

    递推 1什么是递推?:根据已有节点的值,以及规律推出之后节点的值 2为什么要用递推:简单的解决有规矩事件 3怎么用?: 我们举个经典的例子: 如果1对兔子每月能生1对小兔子,而每对小兔在它出生后的第3 ...