命名此文件为:test.js
/**
复选框[全选][单选]
要使用次javaScript代码请先修改下面变量
checkNameSpace=[所有]checkbox所在的最近一层标签ID
checkAllName = 全选checkbox的name值
Author:Rong4It
Date:2010-09-28
Declare:[别瞎改就中]
*/
var checkNameSpaceId = "main";
var checkAllName="flag_all";
var input= document.getElementById(checkNameSpaceId).getElementsByTagName("input");
var checkboxArr = new Array();
var checkboxCount=0;
var checkAll;//全选按钮
for(var i=0 ;i<input.length;i++){
if(input.item(i).getAttribute("type")=="checkbox"){
if(input.item(i).getAttribute("name")==checkAllName)
checkAll=input.item(i);
else{
checkboxArr[checkboxCount]=input.item(i);
checkboxCount++ ;
}
}
}
/**
为全选按钮添加事件
*/
checkAll.onclick = function(){
for(var i=0 ;i<checkboxArr.length;i++){
checkboxArr[i].checked = checkAll.checked;
checkboxArr[i].style.cursor="pointer";
}
}
/**
为其他复选框添加按钮
*/
for(var i=0 ;i<checkboxArr.length;i++){
checkboxArr[i].onclick = function(){
var flag = true;
for(var j=0 ;j<checkboxArr.length;j++){
if(checkboxArr[j].checked == false)
flag = false;
}
checkAll.checked = flag;
}
}
checkAll.style.cursor="pointer";
测试例子
<!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=utf-8" />
<title>test</title>
</head>
<body>
<div id="main" class="main">
<table border="1" class="form_table" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="list_first_first_left"><input type="checkbox" name="flag_all" selected="true"/>全选</th>
</tr>
<tr>
<td class="list_nofirst_first_left"><input type="checkbox" name="selected" /></td>
</tr>
<tr>
<td class="list_nofirst_first_left"><input type="checkbox" name="selected"/></td>
</tr>
<tr>
<td class="list_nofirst_first_left"><input type="checkbox" name="selected"/></td>
</tr>
</table>
</div>
//引入javascript
<script type="text/javascript" src="test.js"></script>
</body>
---高分离度---
</html>
分享到：
相关推荐
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
本次解析的文件标题为“复选框 实现 单选 全选”，描述中提到的是如何通过复选框实现单选、多选以及全选的功能，这是一个典型的复选框应用场景，下面我们将详细解析这一知识点。 ### 复选框的单选、多选及全选功能...
总的来说，利用jQuery的灵活性和强大功能，可以轻松实现复选框全选和单选的动态特效，提升用户在网页上的交互体验。这只是一个基础示例，实际开发中，你还可以根据需求添加更多自定义逻辑和动画效果。
### JavaScript 实现复选框与单选按钮的选择控制 在Web开发中，处理表单元素是前端开发人员经常遇到的任务之一。其中，复选框（checkbox）和单选按钮（radio button）是非常常见的输入类型，用于收集用户的选择数据...
1. **目标**：通过JavaScript代码实现对一组复选框进行全选和全不选的操作。 2. **功能需求**： - 全选所有复选框。 - 反选（全不选）所有复选框。 3. **技术选型**：使用纯JavaScript实现。 #### 二、代码分析 ...
自定义购物车二级checkbox全选与单个选择的实现，是提高用户体验和交互性的重要技术点。在这个场景中，通常会有一个顶层的全选checkbox，以及一系列代表商品的子checkbox，用户可以对单个商品进行选择，或者通过全选...
在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...
本文将详细讲解如何使用 Layui 实现复选框的全选与取消功能，这对于用户交互和数据筛选至关重要。 首先，我们来看一下 HTML 结构。在给出的示例中，可以看到有两个级别的复选框：一级复选框（全选/取消）和二级复选...
全选功能通常通过勾选一个主复选框来实现，当主复选框被选中时，所有子复选框都被自动选中；反之，取消主复选框的选择则会取消所有子复选框的选择。实现这个功能的核心在于监听主复选框的`change`事件，并根据其状态...
实现这一功能的关键在于当全选复选框的状态发生变化时，能够同步其他所有复选框的状态。 文中提供的示例代码，通过JQuery的$(function(){})在文档加载完成后绑定点击事件给全选复选框。当全选复选框被点击时，会...
在Bootstrap TreeView中，全选功能通常通过一个按钮或复选框实现，当用户点击全选按钮时，所有树节点都将被选中。单选则是每次只能选择一个节点，选择其他节点时，先前选中的节点将自动取消选择。这通常涉及到...
在JavaScript（JS）中...在网页中，我们通常会有一个复选框作为全选控制元素，以及一组相关的复选框或单选按钮代表可选项目。以下是一个简单的HTML示例： ```html <input type="checkbox" id="selectAll"> 全选 ...
在IT界，"带复选框(checkbox)的树"是一种常见的用户界面元素，它将树形结构的数据与复选框相结合，为用户提供了一种直观、便捷的方式来选择、操作和组织层次化的数据。这种控件通常用于文件管理器、设置菜单、数据库...
全选功能允许用户一次性选择所有选项，通常通过一个复选框或者按钮实现。单选则限制用户只能选择一个选项，常见于需要用户做出唯一选择的情景，如性别选项、颜色选择等。这两种选择方式都是通过JavaScript和DOM操作...
4. **分组逻辑**：对于紧密相关的选项，可以使用复选框组，并提供一个全选/全不选的复选框，提高用户操作效率。 5. **反馈机制**：当用户点击复选框时，应有明显的视觉反馈，如颜色变化或高亮显示，以确认选择已被...
接着，"复选框节点树"的实现，是在无限极节点树的基础上增加了复选框功能。每棵树的节点都可以包含一个复选框，用户可以通过选择复选框来选择或取消选择某个节点。在实现上，需要处理节点状态的同步，包括子节点与父...
总结，"jquery无限极复选框下拉树"是一个基于jQuery和layui的交互式组件，它结合了复选框、下拉菜单和无限级树结构，提供了全选/单选功能，适用于需要展现和操作层次数据的场景。通过理解和运用这些知识点，开发者...
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
在前端开发中，复选框（Checkbox）是用户界面中常用的一种组件，常用于实现多选功能。在本文中，我们将深入探讨如何实现"全选、反选、单选"的功能，特别是在存在一级类别和二级类别的场景下。 首先，我们要理解`...
全选功能允许用户一次性选择所有选项，通常通过一个复选框或者按钮实现。例如，在一个表格中，如果用户想要对所有行执行相同的操作（如删除、导出或编辑），点击全选按钮可以快速勾选所有行的复选框。全选功能的实现...