`

checkbox全选/不选的js代码实现

XHTMLHTML 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>复选框全选与不全选的切换</title> 
</head> 
 
<body> 
<input type=checkbox name=mm value=a onclick="checkItem(this, 'mmAll')"><br> 
<input type=checkbox name=mm value=b onclick="checkItem(this, 'mmAll')"><br> 
<input type=checkbox name=mm value=c onclick="checkItem(this, 'mmAll')"><br> 
<input type=checkbox name=mm value=d onclick="checkItem(this, 'mmAll')"><br> 
<input type=checkbox name=mm value=e onclick="checkItem(this, 'mmAll')"><br><br> 
<input type=checkbox name=mmAll onclick="checkAll(this, 'mm')">全选与不全选的切换  
 
<script language=Javascript> 
function checkAll(e, itemName)  
{  
  var aa = document.getElementsByName(itemName);  
  for (var i=0; i<aa.length; i++)  
   aa[i].checked = e.checked;  
}  
function checkItem(e, allName)  
{  
  var all = document.getElementsByName(allName)[0];  
  if(!e.checked) all.checked = false;  
  else  
  {  
    var aa = document.getElementsByName(e.name);  
    for (var i=0; i<aa.length; i++)  
     if(!aa[i].checked) return;  
    all.checked = true;  
  }  
}  
</script> 
</body> 
</html> 
分享到：
| 软件开发者面试百问
评论
发表评论

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

相关推荐

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–&gt;测试通过，jquery-1.5.1.js–&gt;测试不通过。 实现CheckBox全选/全不选/反选代码如下： &lt;&#37;@ page language="java" ...

    checkbox全选/取消全选以及checkbox遍历jQuery实现代码

    "checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    JQ checkbox 全选和全不选

    "JQ checkbox 全选和全不选"这个主题聚焦于jQuery如何实现复选框的选择功能，特别是全选和全不选的交互效果。这种功能常见于数据表格或列表的筛选中，允许用户一次性选择或取消选择所有项目。 首先，我们需要了解...

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

    这可以通过监听全选Checkbox的`CheckedChanged`事件来实现，然后遍历DataGridView的所有行，设置每一行的Checkbox为与全选Checkbox状态一致。 - **反选功能**：反选意味着取消所有已选中的项。这可以通过再次触发...

    复选框全选全不选JS代码

    本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码，以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框（Checkbox）是Web表单中常见的元素，...

    javascript复选框实现批量选择

    实现“全选/全不选”复选框的 JavaScript 代码为： ``` function checkall() { var ischecked = document.getElementById("checkall").checked; if(ischecked) { checkallbox(); } else { discheckallbox(); }...

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

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

    jquery实现checkbox 全选/全不选的通用写法

    总结来说，jQuery实现checkbox全选/全不选的通用写法主要包含以下步骤： 1. 使用jQuery选择器获取所有需要操作的复选框。 2. 遍历这些复选框，根据全选按钮的状态设置每个复选框的`checked`属性。 3. 提供一个辅助...

    jQuery checkbox全选/取消全选实现代码

    在前端开发中，实现一组复选框（checkbox）的全选和取消全选功能是一个常见的需求。使用jQuery可以简化这一实现过程，因为jQuery提供了丰富的方法和接口来操作DOM元素。接下来，我们将详细介绍如何利用jQuery来完成...

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

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

    三种方式实现checkbox全选，反选

    以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...

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

    在涉及到表单元素如复选框（Checkbox）时，经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能，以及如何进行表单验证。 1. **全选功能** 要实现全选功能，首先我们需要一个主复选框...

    javascript实现全选全不选

    这些功能可以通过简单的JavaScript代码实现，通常与HTML的复选框（checkbox）元素配合使用。在网页中，全选全不选的实现方式主要涉及DOM操作、事件处理和逻辑控制。 首先，我们需要一个全局的复选框，作为全选/全不...

    SimpleTree扩展：支持checkbox节点选择(半选、全选、不选)

    在这个特定的主题中，我们关注的是SimpleTree的一个扩展，即对checkbox节点的支持，这允许用户进行半选、全选或不选的操作。 在Web开发中，树形结构常用于展现层次化的信息，如文件系统、组织架构或者菜单导航。...

    原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    &lt;dd&gt;&lt;span&gt;2010-12-12&lt;/span&gt;&lt;input type="checkbox" name="jsitems" value="" /&gt;原生JS实现的全选/全不选,点行也可选中或取消&lt;/dd&gt; &lt;!-- 更多dd元素... --&gt; &lt;/dl&gt; &lt;/form&gt; ``` 接下来是原生JavaScript的核心...

    checkBox全选——jscheckBox全选——jscheckBox全选——js

    接下来，我们使用JavaScript来实现全选/全不选的功能。这里我们绑定`click`事件到全选`checkBox`，当它被选中或取消选中时，遍历并改变所有其他`checkBox`的状态： ```javascript document.getElementById('select...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框（checkbox）以及全选功能。EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列预定义的 CSS 样式和 JavaScript 组件，帮助...

    vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip

    在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...

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