`
mowengaobo
  • 浏览: 165131 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jquery checkbox

 
阅读更多
  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=gb2312"  />   
  5. <title>louis-blog >> jQuery 对checkbox的操作</title>   
  6. <script type='text/javascript'  src= "../jquery.js" ></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;" >   
  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 的checkbox样式

    对于“jQuery的checkbox样式”,这是一个关注于提升网页中复选框(checkbox)视觉效果的主题。在这个场景中,我们讨论的是一个基于jQuery的插件,它专门用于美化标准HTML复选框的样式。 该插件的名称可能为“jQuery...

    jquery checkbox tree editor v1.0

    《jQuery Checkbox Tree Editor v1.0:构建动态交互的树形复选框编辑器》 在Web开发领域,用户界面的交互性和易用性是提升用户体验的关键因素之一。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM...

    jQuery操作checkbox并获取选中值

    本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...

    jQuery Checkbox列表双向选择移动代码.zip

    《jQuery Checkbox列表双向选择移动代码详解》 在Web开发中,jQuery库因其简洁的API和强大的功能而广受欢迎。在日常应用中,我们经常需要处理复选框(Checkbox)的选择和移动,例如在列表中实现从一个区域选择并移...

    jquery checkbox 选中 取消 checkbox多选

    本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 首先,我们需要理解HTML中的`&lt;input&gt;`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...

    jQuery Checkbox列表双向选择移动代码

    《jQuery实现Checkbox列表双向选择移动详解》 在Web开发中,用户交互的界面设计往往需要具备灵活多变的功能,以提升用户体验。其中,双向选择列表是常见的一种交互方式,允许用户在两个列表之间自由移动选中项。...

    绚丽的复选框 jquery-checkbox

    **绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...

    jQuery的高性能TreeView源码(带CheckBox)

    jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...

    jquery 对checkbox的操作

    本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理以及Ajax交互等任务。在涉及到表单元素如复选框(Checkbox)时,经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery ...

    JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    jquery checkbox点击选中列表样式代码

    接下来,我们可以使用jQuery来监听checkbox的`click`事件,并根据其状态改变相应的列表项样式。以下是一个基础的实现: ```javascript $(document).ready(function() { $('#checkboxList input[type="checkbox"]')...

    jquery checkbox 二级联动

    仅供学习,有兴趣可以看看,高手勿入。代码很简单的。

    jquery checkbox树

    jquery 树形 checkbox jQuery(document).ready(function(){ jQuery(".mytree").checkboxTree({ collapsedarrow: "images/checkboxtree/img-arrow-collapsed.gif", expandedarrow: "images/checkboxtree/img-...

    jquery之checkbox操作(v1.0.0)

    在本教程中,我们将深入探讨如何使用jQuery来操作checkbox元素,特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先,让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素,用于让用户对一...

    jQuery实现CheckBox控件CheckListBox全选功能

    C#.net下通jQuery实现的由CheckBox来控件CheckBoxList的全选操作,通过CheckBox来全选CheckBoxList,当有一个CheckBoxList选中时,CheckBox则被选中,且并且可以取得选中的CheckBox和CheckBoxList的value和text

Global site tag (gtag.js) - Google Analytics