javaScript-复选框[全选][单选]分离实现

最新推荐文章于 2021-03-12 16:33:35 发布
最新推荐文章于 2021-03-12 16:33:35 发布
阅读量128 收藏
点赞数
分类专栏： WebUI-->JavaScript 文章标签： JavaScript ViewUI
命名此文件为: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>
Reven_An
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular Js 里面table, checkbox制作可多选，单选的表格
qq_34241677的博客
11-30 4009
Angular Js 里面table, checkbox制作可多选，单选的表格查看别人的方法再加拓展，忘记了原博客地址； 主要实现主表格里面可以展开子表，子表的信息可以多选也可以单选，并绑定数据，算是三级选中吧？； 复选框只有两个值：true或者false，因此在AngularJS中，一般都是将复选框的ng-model绑定为一个布尔值属性，通过这两个布尔值来决定其勾选状态，以及通过其勾选状态来设
如何将单选题多选题分开_别再说不会分析多选题了！这6种方法解决你的烦恼！...
weixin_39688170的博客
01-12 3396
在进行问卷研究时，很多时候都会使用到多选题，多选题很容易理解，而且很多场合时都需要使用多选题进行数据收集。但当进行分析时会遇见一种尴尬，即只能做最简单的频数，计算个数或者计算下简单的百分比，使得分析比较简单，更谈不上‘高大上’。今天小编便详细讲解下多选题的‘高大上’分析方法，以及分析的后台原理，并且借助SPSSAU分析平台进行讲述具体如何操作。计算百分比，普及率和响应率，帕累托图这三种方法都是通过...
Java单选多选灵活切换,js实现单选多选，其中一个选项能展开更多内容
weixin_39746794的博客
03-12 352
主要是想实现一个单选多选的功能，需要同时满足：1、点任意一个选项能依次选中、取消选中；2、点 自定义 选项，能展开更多的内容；3、点 其他选项 的时候，能隐藏 因点击“自定义”而展开的更多内容。页面截图和完整代码如下：A.filter-condition{ padding: 10px 0; }.filter-condition .list1 h4{ font-size: 14px; backgro...
原生js multiple实现多选
IT博客技术分享
06-01 3268
使用方法还是原来的步骤：1、引入js文件，2、在select标签上添加属性multip，然后调用方法即可（只有两步哦！） 可以先访问一下这里哟：演示地址（不想访问也可以往下读） 先上图： 这个是选中后的效果，我们用的是select标签，选中后子标签会变成蓝色，如果想取消，再点击一下即可取消。 取值，调用selectMultip.getVal("22")方法即可： 赋值，调用selectMultip.setVal(id,data)即可，第二个参数类型可以是字符串或者数组,如图： 具体取值、赋值、.
单选框的分组
听风流过
04-26 3603
7.5  单选按钮控件RadioButton 视频讲解：光盘\TM\Video\7\单选按钮控件RadioButton.exe 与复选框控件类似，单选按钮也为用户提供了选项信息，与复选框不同的是，用户只能在一组单选按钮中选择一项，而不能进行多项选择。图7.29显示了单选按钮在控件面板和对话框中的效果。   7.5.1  为单选按钮设置分组
layui复选框的全选与取消实现方法
10-16
本文将详细讲解如何使用 Layui 实现复选框的全选与取消功能，这对于用户交互和数据筛选至关重要。 首先，我们来看一下 HTML 结构。在给出的示例中，可以看到有两个级别的复选框：一级复选框（全选/取消）和二级复选...
jquery 操作单选框，复选框，下拉列表实现代码
10-29
1. **复选框全选/反选操作** - HTML 部分：创建多个同名的复选框，通常用于多选场景，例如爱好选择。 ```html <input type="checkbox" name="item" value="football"/> football ...
js获取单选框或复选框值及操作
10-27
在JavaScript中，获取单选框或复选框的值是一项常见的任务，特别是在处理用户输入或者构建表单提交功能时。本文将详细介绍如何使用JavaScript来获取这些控件的值，并进行一些基本的操作。 首先，让我们来看一下如何...
layui 监听表格复选框选中值的方法
10-18
当用户选中或取消复选框时，`obj`参数包含了当前操作的相关信息，包括`data`（对应的数据项）、`checked`（是否被选中）和`type`（单选或全选）。根据这些信息，我们可以添加或删除ID到`ids`数组中： ```javascript...
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
10-24
在本文中，我们将深入探讨如何使用 jQuery 实现按钮点击时的全选/反选、单选框/复选框操作，以及文本框验证。 首先，我们来关注按钮的点击事件。在 jQuery 中，可以使用 `$(document).ready` 函数确保文档加载完成...
element table多选改单选
weixin_43998604的博客
07-02 1664
闲着无聊想把项目的多选改成单选，由于以前设计图是多选，但是实际运用中并用不到，所以就抽时间改下，由于接口什么都对接完毕，如果动结构会很麻烦，以前运用的就是element table type=selection设置的多选，如图： 本来准备想使用radio，或者使用checkbox修改下，由于接口对接完毕，所以不太好修改，于是研究下了API，发现了个可以取巧的方法，分享一下， handleSelectionChange(row) { this.tableData.forEach((item)=&g
ElementUI-table实现 checkbox 实现单项选择
我没受刺激啊
06-22 5603
参考ElementUI文档-table 参考ElementUI文档-table
尚品汇项目思维导图 根据思维导图进行复习
07-13
尚品汇项目思维导图 根据思维导图进行复习
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
Go：Go语言项目实战教程
07-14
Go：Go语言项目实战教程
反恐精英游戏CS1.6安装好后界面看不到菜单，改中文，并调整分辨率
最新发布
07-14
反恐精英游戏CS1.6安装后，很多人打开后界面是看不到菜单的，一般是因为分辨率不对，将这个.reg导入即可完成设置。 下载完成后，双击运行该文件，按照提示进行操作。在导入过程中，可能会出现警告信息，点击“是”或“确定”继续。 导入成功后，重新启动CS1.6游戏，你会发现界面已经调整为正确的分辨率，菜单也能够正常显示了。这样，你就可以愉快地享受游戏了。
垫板凸模加工及三数控机床视化仿真的研究（毕业论文）
07-14
【作品名称】：垫板凸模加工及三数控机床视化仿真的研究（毕业论文） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：在计算机技术迅猛发展的同时，数控技术也迎来了革命性的变化，计算机仿真、模拟技术已成为实际加工的前提，它省去了大量的工作量，提高了生产效率，最重要的是模拟、仿真技术将实际加工中的材料损失降到了最低，大大节约了加工成本。作者在查阅和搜索了大量与本毕业设计相关资料的基础上，对数控技术，特别是其中的模拟仿真技术进行深刻的认识和研究，并在指导老师的耐心指导下，首先熟悉了CATIA V5 R20 软件，设计出此次两个零件的垫板凸模任务是根据模型设计出他它们的加工方法，利用轮廓铣对复杂曲面进行粗加工和精加工，最后，结合CATIA中设计好了的模型实例展现了VERICUT环境下数控加工仿真的全过程
大学生创业计划书(42)三份资料.doc
07-14
大学生创业计划书(42)三份资料.doc
js html购物车复选框全选单选完整代码
07-04
在JavaScript和HTML中，创建一个购物车的复选框全选/单选功能可以通过以下几个步骤完成。这里是一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>购物车复选框</title> <style> .cart-checks { display: flex; gap: 10px; /* 控制复选框之间的间距 */ } .check-all { margin-right: 10px; } </style> </head> <body> <h2>购物车商品选择</h2> <div class="cart-checks"> <!-- 商品项，这里的数量可以动态添加 --> <label class="checkbox" for="item1"> <input type="checkbox" id="item1" value="商品1"> 商品1 </label> <label class="checkbox" for="item2"> <input type="checkbox" id="item2" value="商品2"> 商品2 </label> <!-- 更多商品... --> <button id="checkAll">全选</button> <button id="uncheckAll">全不选</button> </div> <script> // 获取所有复选框和全选按钮 const checkboxes = document.querySelectorAll('input[type="checkbox"]'); const checkAllBtn = document.getElementById('checkAll'); const uncheckAllBtn = document.getElementById('uncheckAll'); // 全选按钮事件处理 checkAllBtn.addEventListener('click', function() { checkboxes.forEach(function(checkbox) { checkbox.checked = true; }); }); // 全不选按钮事件处理 uncheckAllBtn.addEventListener('click', function() { checkboxes.forEach(function(checkbox) { checkbox.checked = false; }); }); // 当复选框状态改变时，检查是否有被选中的 checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { if (checkboxes.filter(checkbox => checkbox.checked).length === checkboxes.length) { checkAllBtn.textContent = '全选'; } else { checkAllBtn.textContent = '全不选'; } }); }); </script> </body> </html> ``` 这个示例展示了如何使用JavaScript控制复选框的全选和全不选操作，并且当任何一个复选框的状态变化时，会自动更新全选按钮的状态。你可以根据实际需求对商品列表和样式进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值