`
piperzero
  • 浏览: 3554959 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jquery中实现全选按钮

 
阅读更多
<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#handle').click(function(){
if($(this).attr('checked')==true){
$('.toggle').attr('checked','true');
}
else{
$('.toggle').removeAttr('checked');
}
});
$('.toggle').click(function(){
if($('.toggle:checked').length==$('.toggle').length){
$('#handle').attr('checked','true');
}
else{
$('#handle').removeAttr('checked');
}
});
});
</script>
<style type='text/css'>
ul{
background-color:#ccc;
list-style:none;
margin 20px auto;
}
li{
padding:10px;
}
</style>
</head>
<body>
<ul>
<li>
<input type='checkbox' id='handle'>
<label for='handle'>
<strong> Toggle ALL</strong></label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> aaaaaaa</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> bbbbbbb</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> cccccccc</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> ddddddd</label>
</li>
</ul>
</body>
</html>
分享到：
| php中mysql_fetch_row与mysql_fetch_asso ...
评论
发表评论

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

相关推荐

    jquery通用全选并控制操作按钮

    "jquery通用全选并控制操作按钮"这个主题是关于利用jQuery实现一种常见的用户界面功能，即在表格或者列表中提供一个全选按钮，可以一键选择所有选项，同时根据选中项的数量来控制其他操作按钮的可见性或可用性。...

    Jquery实现全选和反选功能

    本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...

    【JavaScript源代码】jQuery实现全选按钮.docx

    3. **动态更新全选按钮状态**：监听所有指定复选框的状态变化，如果所有复选框均被选中，则全选按钮也被选中；反之，若有任意一个未被选中，则全选按钮处于未选中状态。 4. **全选按钮控制所有复选框**：点击全选...

    JQuery实现checkbox的全选取消全选

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

    JQuery实现全选、全不选、反选功能

    JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中...

    js/jQuery实现全选效果

    在jQuery中，我们可以监听所有子选框的`click`事件，通过计算已选中子选框的数量与总数的对比来更新全选按钮状态。 ```javascript $(document).ready(function() { $('#j_tb input[type="checkbox"]').click...

    JavaScript与JQuery实现全选例子

    无论是使用原生JavaScript还是jQuery来实现全选功能，关键是理解其中的核心逻辑——即如何根据全选按钮的状态来更新所有复选框的状态，以及如何根据所有复选框的状态来更新全选按钮的状态。此外，根据项目的实际需求...

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

    本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`&lt;input type="checkbox"&gt;`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...

    表格中全选按钮的使用以及删除功能的实现

    全选按钮的实现通常涉及到JavaScript或者jQuery。在页面上添加一个`&lt;input type="checkbox"&gt;`作为全选按钮，当用户点击该按钮时，通过JavaScript遍历所有行中的复选框（假设每个数据行都有一个对应的复选框），并...

    jquery复选框全选操作

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

    jQuery全选

    在JavaScript的世界里，...实现jQuery全选的核心在于监听全选按钮的点击事件，然后根据事件处理函数中的逻辑，改变所有子项的选中状态。这通常涉及到DOM遍历和复选框状态的同步。 三、代码实现 1. HTML结构： ```html ...

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

    若要实现全不选，只需在全选按钮的点击事件中，将所有复选框的选中状态设为 `false`： ```javascript $('#select-all').click(function() { $('input[type="checkbox"]').prop('checked', false); }); ``` 4...

    jQuery实现全选

    在网页开发中，jQuery 是一个非常流行的 JavaScript 库，它提供了丰富的 API 和简洁的语法，使得操作 DOM、处理事件、实现动画效果等任务变得更加容易。本篇将详细讲解如何使用 jQuery 来实现“全选”、“反选”以及...

    jquery全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    jquery实现checkbox的全选和全不选

    jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；

    js, jQuery实现全选、反选功能.docx

    这段代码中，通过获取全选按钮`#box`和所有子复选框的引用，实现了全选和反选的功能。当全选按钮被点击时，会遍历并更改所有子复选框的`checked`属性。同时，通过在子复选框的`onclick`事件中设置计数器，当所有复选...

    jquery实现购物车购物车全选和增加删除商品.zip

    上面的代码中，`prop("checked", value)`用于设置或获取元素属性，这里的`value`是根据全选按钮的状态确定的。 4. **商品数量增减**：购物车中通常会有加减按钮控制商品的数量。我们可以通过监听加减按钮的点击事件...

    jQuery表格行全选反选单选代码.zip

    首先，`jQuery表格行全选反选单选代码`的核心是实现表格中的复选框操作。当用户点击表格的行时，行内的复选框会被选中或取消选中，同时该行会呈现出高亮状态，以提供清晰的视觉反馈。这种功能在数据管理和筛选场景中...

    jquery 复选框 全选，全不选

    本话题主要关注如何使用jQuery来实现复选框的全选和全不选功能。在HTML页面中，复选框是一种常见的表单元素，用于让用户可以选择多个选项中的一个或多个。全选和全不选功能则为用户提供了一种便捷的方式来一次性选择...

    用jquery实现全选，取消，反选等与否和拖拽

    在这个场景中，我们关注的是如何利用jQuery来实现全选、取消选择、反选的功能，以及如何实现元素的拖拽效果。以下是关于这些功能的详细解释： **全选、取消和反选功能**： 1. **全选**：这个功能允许用户一键选中...

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