1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <html>
  3.  <head>
  4.  <mce:style><!--
  5.    --></mce:style><style mce_bogus="">    
  6.  
  7.  </style>
  8.  <title>JS获取复选框被选中的值</title>
  9.  </head>
  10.  <body>
  11.  <input type="checkbox" name="test" value="" />
  12.  <input type="checkbox" name="test" value="" />
  13.  <input type="checkbox" name="test" value="" />
  14.  <input type="checkbox" name="test" value="" />
  15.  <input type="checkbox" name="test" value="" />
  16.  <input type="checkbox" name="test" value="" />
  17.  <input type="checkbox" name="test" value="" />
  18.  <input type="checkbox" name="test" value="" />
  19.  <input type="button" onclick="chk()" value="提  交" />
  20.  </body>
  21.  </html

JS代码

对checkbox的其他几个操作

1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值

js代码

  1. $("document").ready(function(){
  2. $("#btn1").click(function(){
  3. $("[name='checkbox']").attr("checked",'true');//全选
  4. })
  5. $("#btn2").click(function(){
  6. $("[name='checkbox']").removeAttr("checked");//取消全选
  7. })
  8. $("#btn3").click(function(){
  9. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
  10. })
  11. $("#btn4").click(function(){
  12. $("[name='checkbox']").each(function(){//反选
  13. if($(this).attr("checked")){
  14. $(this).removeAttr("checked");
  15. }
  16. else{
  17. $(this).attr("checked",'true');
  18. }
  19. })
  20. })
  21. $("#btn5").click(function(){//输出选中的值
  22. var str="";
  23. $("[name='checkbox'][checked]").each(function(){
  24. str+=$(this).val()+"/r/n";
  25. //alert($(this).val());
  26. })
  27. alert(str);
  28. })
  29. })
  30.

html代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>louis-blog >> jQuery 对checkbox的操作</title>
  6. <mce:script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js" mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></mce:script>
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. $("document").ready(function(){
  10. $("#btn1").click(function(){
  11. $("[name='checkbox']").attr("checked",'true');//全选
  12. })
  13. $("#btn2").click(function(){
  14. $("[name='checkbox']").removeAttr("checked");//取消全选
  15. })
  16. $("#btn3").click(function(){
  17. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
  18. })
  19. $("#btn4").click(function(){
  20. $("[name='checkbox']").each(function(){//反选
  21. if($(this).attr("checked")){
  22. $(this).removeAttr("checked");
  23. }
  24. else{
  25. $(this).attr("checked",'true');
  26. }
  27. })
  28. })
  29. $("#btn5").click(function(){//输出选中的值
  30. var str="";
  31. $("[name='checkbox'][checked]").each(function(){
  32. str+=$(this).val()+"/r/n";
  33. //alert($(this).val());
  34. })
  35. alert(str);
  36. })
  37. })
  38. -->
  39. </SCRIPT>
  40. </HEAD>
  41. <body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;">
  42. <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">
  43. <form name="form1" method="post" action="">
  44. <input type="button" id="btn1" value="全选">
  45. <input type="button" id="btn2" value="取消全选">
  46. <input type="button" id="btn3" value="选中所有奇数">
  47. <input type="button" id="btn4" value="反选">
  48. <input type="button" id="btn5" value="获得选中的所有值">
  49. <br /><br />
  50. <input type="checkbox" name="checkbox" value="checkbox1">
  51. checkbox1
  52. <input type="checkbox" name="checkbox" value="checkbox2">
  53. checkbox2
  54. <input type="checkbox" name="checkbox" value="checkbox3">
  55. checkbox3
  56. <input type="checkbox" name="checkbox" value="checkbox4">
  57. checkbox4
  58. <input type="checkbox" name="checkbox" value="checkbox5">
  59. checkbox5
  60. <input type="checkbox" name="checkbox" value="checkbox6">
  61. checkbox6
  62. </form>
  63. </div>
  64. </body>
  65. </HTML>

《jquery权威指南2》学习笔记------ jquery获取复选框的值的更多相关文章

  1. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

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

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

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

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

  4. jquery学习笔记：获取下拉框的值和下拉框的txt

    <div class="form-group"> <select class="form-control" id="iv_level ...

  5. jquery获取复选框的值

    勾选checkbox,并把勾选的值显示在某个div中 <!DOCTYPE html > <html> <head> <meta charset="U ...

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

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

  7. mui开发中获取单选按钮、复选框的值

    js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...

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

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

  9. jquery怎样获取多个复选框的值？

    jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));    ...

随机推荐

  1. 如何修改浏览器默认的alert样式？

    window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = &qu ...

  2. C++中四种类型转换以及const_cast是否能改变常量的问题

    we have four specific casting operators:dynamic_cast, reinterpret_cast, static_cast and const_cast. ...

  3. sim800L调试问题

    SIM800L默认上电开机,若此时没有把rst和pwk引脚提前设置好,SIM800l会使stm32进入硬件中断(这可能是因为方面电源的原因导致的),同时sim800L开机后需要一定的时间稳定下来,建议 ...

  4. 记一次解决layui 的bug - layer.open 与 layui渲染问题

    场景是这样的,通过layer打开一个弹窗,里面放置一个表单,表单是用layui来渲染的. 当弹窗完成之后,我需要渲染表单中的一些内容.譬如laydate. layer.open({ type: 1, ...

  5. OSI各层的功能和主要协议（转载）

    OSI各层的功能和主要协议: 物理层 物理层规定了激活.维持.关闭通信端点之间的机械特性.电气特性.功能特性以及过程特性.该层为上层协议提供了一个传输数据的物理媒体. 在这一层,数据的单位称为比特(b ...

  6. unity, StartCoroutine and StopCoroutine

    startCoroutine("func",1.0f)可以用stopCoroutine("func")来停. startCoroutine(func(1.0f) ...

  7. mysqldump全量备份+mysqlbinlog二进制日志增量备份

    日常的数据备份及恢复测试,是DBA工作重中之重的事情,所以要做好备份及测试,日常的备份常见有mysqldump+binlog备份.xtrabackup+binlog备份,无论那一种,几乎都少不了对bi ...

  8. Atitit.mysql oracle with as模式临时表模式 CTE 语句的使用,减少子查询的结构性 mssql sql server..

    Atitit.mysql  oracle with as模式临时表模式 CTE 语句的使用,减少子查询的结构性 mssql sql server.. 1. with ... as (...) 在mys ...

  9. [c#]分析器错误消息: 发现不明白的匹配。

    (1)同样的变量名称 protected System.Web.UI.WebControls.Label lbltitle; protected System.Web.UI.WebControls.L ...

  10. Secure REST API with oauth2 （翻译）

    http://blog.csdn.net/haiyan_qi/article/details/52384734 ******************************************** ...