勾选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. centos7 安装nginx和php5.6.25遇到 无法访问php页面 报错file not found 问题解决

    php-fpm安装完成,nginx安装完成 netstap -ntl| 发下端口正常开启 iptables -L 返现9000端口已经开放 ps -aux|grep nginx 发下nginx进程正常 ...

  2. HTML5+JS 《五子飞》游戏实现（四）夹一个和挑一对

    在第一章我们已经说了怎么才能“夹一个”以及怎样才能挑一对,但那毕竟只是书面上的,对码农来讲,我们还是用代码讲解起来会更容易了解. 为了更容易对照分析,我们先把路线再次贴出来: // 可走的路线 thi ...

  3. 代码设计工具——PowerDesigner

    详情请参考博客: http://www.blogjava.net/wangdetian168/archive/2011/04/07/347847.html

  4. 软件工程（FZU2015）增补作业

    说明 张老师为FZU软件工程2015班级添加了一次增补作业,总分10分,deadline是2016/01/01-2016/01/03 前11次正式作业和练习的迭代评分见:http://www.cnbl ...

  5. 【BZOJ 3527】【ZJOI 2014】力

    代换一下变成多项式卷积,这里是的答案是两个卷积相减,FFT求一下两个卷积就可以啦 详细的题解:http://www.cnblogs.com/iwtwiioi/p/4126284.html #inclu ...

  6. Kernel Methods (1) 从简单的例子开始

    一个简单的分类问题, 如图左半部分所示. 很明显, 我们需要一个决策边界为椭圆形的非线性分类器. 我们可以利用原来的特征构造新的特征: \((x_1, x_2) \to (x_1^2, \sqrt 2 ...

  7. IE6和IE7中<a>标签宽高设置无效的问题

    昨天写了一个引导界面, 发现界面中的IE67存在一个问题, 在某些情况下,  A锚链接如果设置了宽高,而且position:absolute的情况下, A标签的宽高无效, 至于总体的效果, 因为这个A ...

  8. 51nod 1076强连通

    Tarjan算法来解这题.无向图可以转化为有向图来解决. #include<map> #include<queue> #include<stack> #includ ...

  9. C#-ade.net-实体类、数据访问类

    实体类.数据访问类 是由封装演变而来,使对数据的访问更便捷,使用时只需要调用即可,无需再次编写代码 实体类是按照数据库表的结构封装起来的一个类 首先,新建文件夹 App_Code ,用于存放数据库类等 ...

  10. selenium+webdriver+python 中警告框的处理方法

    在自动化测试过程中,经常会遇到弹出警告框的情况,如图所示: 在 WebDriver 中处理 JavaScript 所生成的 alert.confirm 以及 prompt 是很简单的.具体做法是使用  ...