`
Longmanfei
  • 浏览: 48096 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript实现复选框(全选反选功能)

JavaScript游戏 
阅读更多

在一个项目开发中我们经常见到页面会有复选框的全选和反选功能，这样我们才能够进行下一步的批量删除或者实现其他的功能，那我们应该怎样去实现这样的一个功能呢？其实想要实现复选框的全选和反选功能很简单只要得到复选框的集合判断一下就可以了。

代码实现如下:

	<body>
	<div>
	
	
	<input type="checkbox" name="cxb" value="游戏" />游戏
	<input type="checkbox" name="cxb" value="吃饭" />吃饭
	<input type="checkbox" name="cxb" value="唱歌" />唱歌
	<input type="checkbox" name="cxb" value="跳舞" />跳舞
	<input type="checkbox" name="cxb" value="虚席" />徐诶
	<input type="checkbox" name="cxb" value="徐诶" />学习
	<input type="button" value="全选" onclick="select1(1)"/>//注意select是关键字不能写
	<input type="button" value="反选"  onclick="select1(-1)"/>
	<input type="button" value="取消"  onclick="select1(0)"/>
	
	</div>
	</body>
	
	
	
	<script type="text/javascript">
	   function select1(oper){
	    //alert("11");
	    var arr=document.getElementsByName("cxb");//得到集合
		 for(var i=0;i<arr.length;i++){
	      switch(oper){//没有break就继续执行知道遇到break跳出
		      case 0:
			  case 1:
		       arr[i].checked=oper;
			   break;
			  case -1:
			   arr[i].checked=!arr[i].checked;
			  break;
		  }
	   }
	   
	   }
	
	</script>

 

<!--EndFragment-->
1
顶
1
踩
分享到：
| Javascript 实现的考试系统时间倒计
评论
发表评论

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

相关推荐

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

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

    JS实现复选框全选反选

    JS实现复选框全选反选

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

    JQ 复选框全选反选

    总结来说，"JQ 复选框全选反选"是jQuery中常见的用户交互功能，通过选择器定位复选框，绑定事件处理函数，以及利用DOM操作改变元素属性，可以轻松实现这一功能。在实际开发中，理解并掌握这些基础技巧对于提升用户...

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

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

    基于jQuery的三个JS复选框全选反选例子.zip

    本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能，这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先，我们需要理解复选框...

    实现table表格checkbox复选框的全选 反选

    在网页开发中，表格（Table）是常用的数据...总的来说，实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS（用于样式），这是一项基础但重要的交互设计。理解并掌握这个功能，有助于提升网页的用户体验。

    复选框全选、全不选和反选的效果实现.rar

    本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...

    spreadjs_列头添加复选框全选功能-demo.zip

    《SpreadJS：实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库，由 GrapeCity 公司开发，它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中，我们经常需要在列头添加复...

    多选框全选反选

    ### 多选框全选与反选功能实现 在网页开发中，经常需要用到表单来收集用户的选择。其中，多选框（复选框）是一种常见的控件类型，用于允许用户选择一个或多个选项。本篇文章将详细介绍如何利用JavaScript实现多选框...

    Javascript实现全选反选

    全选反选的核心思想是通过更改一个主复选框的状态（通常被称为“全选”按钮）来同步所有子复选框的状态。当“全选”按钮被选中时，所有子复选框应被选中；反之，如果“全选”按钮被取消选中，所有子复选框则应被取消...

    javaScript实现复选框全选反选事件详解

    复选框全选和反选是网页交互设计中常见的功能，常用于列表操作、表单提交等场景，允许用户一次性选择或取消选择多个选项。文中将通过实例代码展示如何编写全选和反选功能，以及它们的基本工作原理。 首先，全选功能...

    juqery实现复选框全选/反选demo源码

    在标题"jQuery实现复选框全选/反选demo源码"中，我们关注的核心知识点是利用jQuery实现复选框的全选和反选功能。这个功能在许多网页应用中都非常实用，比如在表格数据筛选、表单多选等场景。通过简单的jQuery代码，...

    JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2 .0

    在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中，我们将探讨如何利用JavaScript实现对复选框（checkbox）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...

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

    #### 二、原生JavaScript实现复选框全选与反选 除了使用jQuery外，还可以使用原生JavaScript来实现相同的功能。 **2.1 全选功能** ```javascript // 全选 function chooseAll() { var selects = document....

    复选框全选和反选.zip

    这个"复选框全选和反选.zip"文件可能包含了一个JavaScript实现的解决方案。JavaScript是一种广泛使用的客户端脚本语言，用于为网页添加交互性。 复选框（Checkbox）是HTML中的一个基本元素，它允许用户对一个选项...

    带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选

    总结来说，带复选框的多级目录树是一种高效的数据组织和操作方式，结合全选和反选功能，能极大地提高用户的操作效率。在实现时，我们需要关注复选框的状态管理、多级目录树的数据结构以及父子节点间的联动逻辑，确保...

    复选框的全选和反选、复选框的全选和反选

    全选和反选功能则是复选框常用的一种交互模式，极大地提升了用户体验，特别是当选项数量较大时。本文将深入探讨复选框的全选和反选机制及其在IT中的应用。 全选功能是指用户只需点击一个按钮或复选框，就能同时选中...

    简单实现全选反选功能（html）

    一个基本的全选/反选功能通常包括一个主复选框（全选按钮）和一系列子复选框（代表具体选项）。HTML代码如下： ```html &lt;!DOCTYPE html&gt; 全选/反选功能 ...

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