勾选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. Google Zxing 二维码生成与解析

    生成二维码的开源项目可谓是琳琅满目,SwetakeQRCode.BarCode4j.Zxing...... 前端有JQuery-qrcode,同样能实现生成二维码. 选择Zxing的原因可能是对 Go ...

  2. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  3. （译文）MVC通用仓储类

    Generic Repository Pattern MVC Generic Repository Pattern MVC 原文链接:http://www.codeproject.com/Articl ...

  4. 基于FPGA的音频信号的FIR滤波（Matlab+Modelsim验证）

    1 设计内容 本设计是基于FPGA的音频信号FIR低通滤波,根据要求,采用Matlab对WAV音频文件进行读取和添加噪声信号.FFT分析.FIR滤波处理,并分析滤波的效果.通过Matlab的分析验证滤 ...

  5. java中的重绘

    void java.awt.Container.validate()Validates this container and all of its subcomponents.这个函数更新容器及其全部 ...

  6. C# 压缩与解压字符串（面试题）

    /* * 题目:压缩字符串.如“abbcccddddeef”,压缩成“a1b2c3d4e2f1” * 解题: 这个题目也是面试常见的题目.看似很简单,其实暗藏杀机.一般的想法就是,一边遍历,一边计数, ...

  7. Angularjs做的一个小页面

    <!DOCTYPE html><html lang="en" ng-app="todolist"> <head> <m ...

  8. 初步认识ajax（个人整理）

    通过使用ajax可以实现页面的部分动态化 ajax可以发送一个请求去服务端,而服务端则发送回一小段数据给客户端,这样就可以避免加载整个页面,因为很多时候页面只需要刷新某一部分的数据,而其他大部分体就不 ...

  9. 状态压缩 HDU 3182

    t组数据 n个汉堡 e的能量 接下来的2行 val    n个 得到的权 cost  n个 花去的能量 接下来n行 每行一个q  q个数字 代表这类汉堡做好要的前提  每个汉堡只能用一次 #inclu ...

  10. 控件 UI: StateTrigger

    VisualState 之 StateTrigger 示例1.自定义 StateTriggerControls/UI/VisualState/MyDeviceFamilyStateTrigger.cs ...