`

jquery 操作 checkbox 获取选择的checkbox值 全选 全清checkbox

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

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery操作checkbox并获取选中值

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

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

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

    WPF之CheckBox组的全选设计

    3. **全选CheckBox**：创建一个全选CheckBox，其IsChecked属性绑定到一个表示所有选项的枚举值。当全选CheckBox被选中时，所有子CheckBox的IsChecked应设置为全选值；反之则取消所有子CheckBox的选择。 4. **事件...

    jquery获取checkbox选中的值

    在本文中，我们将深入探讨如何使用jQuery来获取checkbox选中的值，包括全选、取消全选、反选以及选中奇数行的操作，并讲解如何获取选中的值。 首先，我们需要引入jQuery库。在`1.html`文件中，我们看到包含了一个名...

    javascript获取checkbox选定的值，checkbox全选功能

    javascript获取checkbox选定的值，checkbox全选功能的一个例子，方便新手朋友下载使用。费了好大劲才把功能做全了。

    JQuery实现checkbox的全选取消全选

    在IT领域，特别是前端开发中，使用jQuery来操作DOM元素是一种常见的实践，特别是在处理复选框（checkbox）的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能，通过分析给定代码片段，提炼出关键...

    Checkbox全选问题

    HtML javascritp checkbox 全选HtML javascritp checkbox 全选

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...

    Recyclerview item上CheckBox，包括全选，取消全选，单选功能

    这个状态可以是布尔值，表示CheckBox是否被选中。此外，我们还需要添加一个成员变量来记录当前是否所有item都被选中，例如，我们可以定义一个`isAllSelected`变量。 ```java public class CustomCheckboxAdapter ...

    winform DataGridView表头带CheckBox全选

    通过以上步骤，我们就成功地在`Winform DataGridView`的表头添加了一个`CheckBox`，实现了全选/全不选的功能。这样的设计使得用户可以便捷地对大量数据进行操作，提高了应用的实用性。在实际项目中，可能还需要考虑...

    jQuery实现CheckBox控件CheckListBox全选功能

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

    checkbox实现全选和反选经典例子

    这里会涉及对DataGridView行的遍历，获取每个Row内的Checkbox控件，并根据全选Checkbox的状态改变它们。 5. **代码示例** ```csharp protected void chkSelectAll_CheckedChanged(object sender, EventArgs e) {...

    jQuery制作全选CheckBox

    ### jQuery实现全选CheckBox功能详解 #### 背景与需求 在Web开发中，特别是在表单处理方面，经常会遇到需要实现多个复选框（CheckBox）的“全选”、“反选”等功能的需求。这样的功能不仅可以提升用户体验，还能...

    jQuery实现checkbox全选的方法

    本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下： 通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据...

    JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下 思路： 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...

    CheckBox实现多选、全选、反选功能

    本教程将深入探讨如何使用CheckBox实现多选、全选和反选功能，这对于构建具有选择列表的应用非常关键。 首先，我们从基础开始。CheckBox的用法很简单，通常在XML布局文件中定义： ```xml &lt;CheckBox android:id="@...

    checkbox的全选与取消

    在网页设计中，复选框（Checkbox）是用户界面中不可或缺的一部分，它允许用户对多个选项进行选择。本文将深入探讨“复选框的全选与取消”这一主题，主要基于提供的HTML文件“checkbox.html”。全选和取消功能通常...

    jQuery获取checkbox选中的值

    理解并掌握如何使用jQuery获取和操作checkbox元素，对于开发交互式的Web应用程序非常重要。上述示例和知识点提供了全面的指南，帮助开发者在实际项目中有效地应用这些技术。通过实践这些方法，开发者可以构建更为...

    Js/Jquery 实现checkbox全选，反选，全不选

    在提供的文件“js实现checkbox全选，反选，全不选.htm”中，应当包含了上述功能的具体实现。通过查看源码，我们可以了解到实际的HTML结构以及jQuery脚本是如何与之配合的。这个文件可以作为一个示例，帮助我们更好地...

Magicbox
Global site tag (gtag.js) - Google Analytics