`
莫生气
  • 浏览: 866695 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery实现复选框

    博客分类:
  • Ajax
阅读更多
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $("#check_all").live("click",function(event)
        {
            if($("#check_all").hasClass('not_checked'))
            {
                $("#check_all").removeClass('not_checked');
                $(".check-box").attr('checked',true);
            }
            else
            {
                $("#check_all").addClass('not_checked');
                $(".check-box").attr('checked',false);
            }
      });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>Select/Deselect</td>
        <td><input type="checkbox" class="check-box not_checked" id="check_all"></td>
      </tr>
      <tr>
        <td>First</td>
        <td><input type="checkbox" class="check-box" id="check_box2"></td>
      </tr>
      <tr>
        <td>Second</td>
        <td><input type="checkbox" class="check-box" id="check_box3"></td>
       </tr>
       <tr>
         <td>Third</td>
         <td><input type="checkbox" class="check-box" id="check_box4"></td>
      </tr>
    </table>
  </body>
</html>
分享到:
评论

相关推荐

    jquery实现 复选框 选中和不选中 美化复选框

    本文将详细介绍如何使用jQuery实现复选框的选中与不选中效果的美化。 首先,我们需要理解jQuery的基本用法。jQuery库简化了JavaScript中的DOM操作、事件处理和动画效果。引入jQuery库后,我们可以使用$(document)....

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jquery实现复选框全选和反选

    《锋利的jquery》利用jquery实现复选框的全选和反选

    Jquery实现复选框反选

    ### Jquery实现复选框反选 在网页开发过程中,我们经常会遇到需要处理表单元素的需求,其中就包括对复选框(checkbox)的操作。本文将详细介绍如何利用JQuery库来实现复选框的全选与反选功能,并提供一个简单的示例...

    jquery实现下拉复选框

    一个js的方法,调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法: * (1)调用js函数:setSelectBox(textItem, myArray); *...

    使用JQuery制作复选框的全选或单选特效

    本教程将深入探讨如何使用jQuery实现复选框的全选和单选特效,为用户界面添加交互性和动态性。 首先,我们需要理解HTML中的复选框(`&lt;input type="checkbox"&gt;`)的基本用法。复选框允许用户从多个选项中选择一个或...

    jquery复选框全选操作

    在本示例中,我们将聚焦于jQuery实现复选框的全选与反选功能,这对于创建数据筛选或批量操作的用户界面非常有用。下面将详细介绍这个功能的实现方式。 首先,我们需要在HTML页面中设置一组复选框,通常我们会为这些...

    jquery 、js实现复选框 (全选、反选)

    #### 一、jQuery实现复选框全选与反选 **1.1 全选功能** 首先来看全选功能的实现。全选即用户点击某个按钮后,页面上所有的复选框都将被选中。 ```javascript // 全选 function checkAll() { $(":checkbox")....

    jquery 复选框组件

    原生的HTML复选框样式有限,但使用jQuery UI库可以实现更美观、功能更丰富的复选框组件。jQuery UI提供了一套完整的UI元素样式,包括自定义的复选框和单选按钮。 #### jQuery UI Multiselect 插件 jQuery UI ...

    jquery无限极复选框下拉树

    **jQuery无限极复选框下拉树**是一种交互式的用户界面元素,常用于在Web应用中展示层次结构的数据,如组织结构、目录树或者复杂的分类系统。这种组件允许用户通过展开和折叠节点来查看和选择多级选项。下面将详细...

    jQuery实现的复选框勾选

    本文将详细解析如何使用jQuery实现复选框的勾选功能,这在网页表单交互中十分常见。 首先,让我们理解复选框(checkbox)的基本概念。在HTML中,复选框元素 `&lt;input type="checkbox"&gt;` 允许用户选择一个或多个选项...

    jquery复选框_全选_反选_取消_选中输出等功能用jquery特效和jquery插件两种表单特效

    ### 使用jQuery实现复选框全选、反选、取消及选中值输出功能 #### 一、背景介绍 在Web开发中,复选框(Checkbox)是常用的表单元素之一,用于收集用户的选择数据。然而,传统的HTML复选框功能较为单一,无法满足...

    基于jquery实现复选框全选,反选,全不选等功能

    在现代网页设计中,复选框是一种非常常见的...通过以上内容的介绍和分析,我们可以看到,使用jQuery实现复选框的相关操作是非常方便的,可以有效地提升用户交互体验。希望本文对需要进行此类功能开发的小伙伴有所帮助。

    基于jQuery实现复选框是否选中进行答题提示

    总的来说,通过jQuery,我们可以轻松地实现对用户选择的复选框进行判断并提供反馈的功能。这种技术在动态网页中非常有用,能够提高用户体验,确保用户能够准确理解他们的选择。如果你有其他实现此类功能的方法,欢迎...

    Jquery复选框美化

    在实际项目中,我们可以通过以下步骤实现复选框和单选按钮的美化: 1. **引入jQuery库**:在HTML文件中引入jQuery库,以便使用其提供的功能。 2. **选择合适的插件**:根据设计需求选择合适的美化插件,下载并引入到...

    jquery 实现复选框的全选操作实例代码

    jquery 实现复选框的全选操作实例代码 最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,...

    jQuery实现复选框全选/取消全选/反选及获得选择的值

    jQuery实现复选框全选、取消全选、反选及获得选择的值是前端开发中常遇到的需求,下面详细介绍一下这些操作的实现方式。 首先,全选功能通常会有一个控制所有复选框状态的主复选框,当主复选框被选中时,页面上所有...

    jquery动态复选框取值

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地...通过动态创建复选框、获取选中状态和值、以及绑定事件处理,我们可以实现丰富的交互功能。在实际项目中,可以根据需求灵活运用这些技巧,提高用户体验。

    jQuery树形复选框插件.zip

    总的来说,jQuery树形复选框插件是实现层次化选择功能的强大工具。通过深入理解其内部机制和使用方法,我们可以灵活地调整和扩展,满足不同项目的需求。在开发过程中,不仅要关注代码的正确性,还要注重性能优化和...

Global site tag (gtag.js) - Google Analytics