`

Javascript 实例--全选反选

 
阅读更多 

<html>
<head></head>
<body>
<script>
for(var i=0; i<20; i++){
	document.write('<input type="checkbox" name="vol[]" />aaaa <br>');
	<!--使用[]可以将变量以数组的形式传递给后台-->
}
</script>
<br>
<br>
<a href="javascript:sall()">select all</a> 
<a href="javascript:nall()">not select all</a> 
<a href="javascript:fall()">select unselect</a> 
<br>
<br>
<label for="ss"><input id="ss" type="checkbox" onclick="selectall(this)">select all</input> </label>
<!--使用label for属性将label中的内容绑定到一起-->

<script>
var vols = document.getElementsByName('vol[]'); 

function sall(){	
	for(var i=0; i<vols.length; i++){
		vols[i].checked=true;
	}
}

function nall(){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=false;
	}
}

function fall(){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=!(vols[i].checked);
	}
}

function selectall(obj){
	for(var i=0; i<vols.length; i++){
		vols[i].checked=obj.checked;
	}
}

</script>


</body>
</html>
分享到：
| Javascript 正则表达式
评论
发表评论

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

相关推荐

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

    在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...

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

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

    JS简单表格列表全选反选代码.zip

    总的来说，"JS简单表格列表全选反选代码"是JavaScript基础应用的一个实例，涉及到事件处理、DOM操作、遍历和逻辑判断等多个核心概念，对于初学者和有一定经验的开发者来说，都是一个很好的学习和参考素材。

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

    在高级控件如DataGridView中，通过结合Checkbox可以实现全选和反选功能，为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

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

    文中将通过实例代码展示如何编写全选和反选功能，以及它们的基本工作原理。 首先，全选功能的实现依赖于一个控制所有复选框状态的总开关，通常是一个带有“全选”标签的复选框。当点击这个全选复选框时，会根据其...

    JQ 全选和反选和取消

    在这个主题下，我们将深入探讨如何实现全选、反选以及取消选择的功能，并结合给出的`demo.html`文件进行实例分析。 1. **全选功能**：全选通常用于一组复选框，例如在一个表格中，用户可以选择全部行。使用jQuery，...

    用angular实现多选按钮的全选与反选实例代码

    以下是一个基于AngularJS的全选与反选实例代码详解： 首先，我们需要在HTML中引入AngularJS库，这里通过`&lt;script&gt;`标签加载了`angular.min.js`。接着，定义了一个名为`select`的Angular应用，并设置了`moreSel`控制...

    vue使用监听实现全选反选功能

    该实现方式使用监听来实现全选反选功能，具体实例代码将在下文中提供。 标签解释 标签“vue 全选反选功能 vue 全选功能 vue 监听”表明了本文的主要主题是 Vue 框架中全选反选功能的实现，并且使用监听来实现该功能...

    javascript实现简单的全选和反选功能

    全选反选&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=button value=全选 id=all&gt; &lt;input type=button value=反选 id=reverse&gt; &lt;input type=checkbox id=flagCheck&gt;

    jQuery实现的表格行全选反选单选特效源码.zip

    这个"jQuery实现的表格行全选反选单选特效源码.zip"文件，显然包含了一套实现表格全选、反选和单选功能的jQuery代码示例。以下是对这个知识点的详细讲解： 首先，表格在Web应用中是常见的数据展示方式，全选、反选...

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

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

    JavaScript例子—实现行的增加、删除、全选、反选

    在这个"JavaScript例子—实现行的增加、删除、全选、反选"的示例中，我们可以深入理解如何利用JavaScript来操作HTML表格，增强用户体验。 首先，全选和反选功能是通过在表格中添加一个复选框来实现的。当用户点击...

    vue实现全选、反选功能

    在JavaScript代码中，我们定义了一个Vue实例，并在data中定义了addList数组，用于存储数据。在methods中，我们定义了selectAll方法，用于处理父级项目的选中状态变化。该方法将父级项目的checked状态传递给子集，并...

    JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法。分享给大家供大家参考。具体分析如下： 通过JS代码对列表框进行全选和反选是经常要操作的，非常具有实用价值。 function listboxSelectDeselect(list...

    JavaScript-Web素材实例

    "网页特效复选框全选、全不选和反选"是增强复选框功能的JavaScript实现，使得用户可以方便地对一组复选框进行批量操作，如全选、全不选或反选，这对于数据筛选和管理非常实用。 压缩包中的各个HTML文件展示了这些...

    Jquery 全选反选实例代码

    在前端开发中，全选、反选和不选功能是十分常见的需求，尤其是在处理批量操作如删除、修改状态等场景时。为了实现这些功能，JQuery作为一门强大的JavaScript库，提供了非常便捷的DOM操作和事件处理能力。本文将详细...

    jQuery Checkbox 全选 反选的简单实例

    本文深入浅出地讲解了如何使用jQuery实现复选框（Checkbox）的全选、全不选和反选功能。这是前端开发中经常遇到的一个需求，特别是在需要批量操作多选框时非常有用。通过具体的实例，本文为读者提供了一套简单易行的...

    vue实现简单全选和反选功能

    在Vue.js中，实现全选和反选功能是常见的需求，尤其在表格或者列表展示大量数据时。在给定的代码示例中，通过使用Vue的`v-model`和`computed`属性，我们可以轻松地实现这个功能。下面将详细解释这个实现过程。 首先...

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