勾选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. JavaEE 获取路径全攻略

    本篇博客是 JavaWeb 应用服务器端在不同环境下获取文件路径的全面总结. 获取文件路径后主要应用的场景,读取 JavaWeb 自定义配置文件.在特定路径下生成各种类型的文件提供下载...... 想 ...

  2. opencv4-highgui之视频的输入和输出以及滚动条

    这是<opencv2.4.9tutorial.pdf>的highgui的三个例子.通过简短的介绍来实现不同函数的理解,省去一些不需要说的东西. 一.增加滑动条 这是opencv中为数不多的 ...

  3. <实训|第七天>横扫Linux磁盘分区、软件安装障碍附制作软件仓库

    期待已久的linux运维.oracle"培训班"终于开班了,我从已经开始长期四个半月的linux运维.oracle培训,每天白天我会好好学习,晚上回来我会努力更新教程,包括今天学到 ...

  4. .Net简单图片系统-使用说明

    使用说明 1. 从github上获取代码,并部署到IIS中,应用程序池选择4.0. 2. 打开配置文件,在AppSettings中,设置SaveMode模式,如果选择的Distributed模式,需要 ...

  5. Beta版本冲刺Day2

    会议讨论 628:       和建平同学一起合作解决了如何获取勾选事件,将勾选的课程信息存入select表格中.但是当运行更新后的项目遇到了无法连接数据库的问题了,目前还在解决中. 因为碰到了这样的 ...

  6. Java微信公众号开发-外网映射工具配置

    一.开发环境准备 1.一个微信公众号 2.外网映射工具(开发调试)如花生壳.ngrok工具 注:与微信对接的URL要具备以下条件a:在公网上能够访问 b:端口只支持80端口 这里使用ngrok.cc: ...

  7. iOS开发--利用MPMoviePlayerController播放视频简单实现

    一.包含头文件#import <MediaPlayer/MediaPlayer.h> 二.重点:给MPMoviePlayerController的view设置frame,并且将view添加 ...

  8. iPad开发--QQ空间,处理横竖屏布局,实现子控件中的代理

    一.主界面横竖屏效果图 二.主界面加载, 初始化Dock(红色框的控件),判断程序启动时的屏幕方向.调用自己- (void)transitionToLandScape:(BOOL)isLandScap ...

  9. iOS开发中的错误整理，AFN框架和MJRefresh框架搭配应该注意的问题

    注意问题一:每次请求之前先将之前的请求取消                            注意问题二:请求成功之后要判断footer或者header的显示状态 首次下拉刷新,要判断是否已经全部 ...

  10. 【BZOJ 4600】【SDOI 2016】硬币游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=4600 转化成nim游戏 因为对于每一个反面朝上的硬币编号可以拆成\(2^a3^bc\),选择这个硬币 ...