javascript 全选/反选,取消选择效果

其实这个效果不难做。

难做的是 如何让用户使用起来方便。

第一个checkbox实现了 全选 反选

最后个checkbox实现了 取消选择

这里只是做一个 JS实例罢了。

这段HTML并没有 实际的价值。

javascript 全选/反选效果。

标题 时间
我们 2010-02-02
我们 2010-02-02
我们 2010-02-02
我们 2010-02-02
   

var $=function(id){return document.getElementById(id);};
var myapp=(function(){
var forminput=$("form1id").getElementsByTagName("input"),
i=0,
checkbox=[];
for( i ; i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

  • js删除Array数组中指定元素的两种方法

    本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=

  • js操作CheckBoxList实现全选/反选(在客服端完成)

    对于CheckBoxList控件来说,一方面要实现大量数据在服务器端的绑定工作,另一方面往往要求实现全选.反选等功能.虽然可以在服务器端完成这方面的工作,但这样一个简单的工作似乎更应该在客户端完成. 具体方法: 在页面中放入一个CheckBoxList控件,并添加几项,用来分析其产生的HTML代码,这样在使用js进行 动态控制时,将会非常清晰其测试代码如下所示: 复制代码 代码如下: <asp:CheckBoxListID="CheckBoxList1"runat="s

  • js删除数组元素、清空数组的简单方法(必看)

    一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置. 三,js 删除数组几种方法 var arr=['a','b','c

  • javaScript checkbox 全选/反选及批量删除

    前台代码 复制代码 代码如下: <script type="text/javascript"> var a; function CheckAll(){ if(a==1) { for(var i=0;i<window.document.form1.elements.length;i++) { var e = form1.elements[i]; e.checked =false; } a=0; } else { for(var i=0;i<window.docum

  • javascript实现可全选、反选及删除表格的方法

    本文实例讲述了javascript实现可全选.反选及删除表格的方法.分享给大家供大家参考.具体实现方法如下: <!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&qu

  • js 分页全选或反选标识实现代码

    注:对多选按钮操作. 1:批量全选添加.批量移除. 2:行单选添加.移除. 3:分页之后(全选或不选)状态标识依然存在 复制代码 代码如下: /* *****>****>tr单选事件 ------------------------------------------------------------------------------------*/ $("#ajaxshowmdqhList tbody tr").live("click",funct

  • js实现checkbox全选和反选示例

    复选框全选示例 复制代码 代码如下: <input type="checkbox" name="selectall" value=on onclick="selectAll()"> function selectAll(form) { var obj = document.getElementsByName('selectall'); var cks = document.getElementsByTagName("inpu

  • javascript 全选/反选,取消选择效果

    其实这个效果不难做. 难做的是 如何让用户使用起来方便. 第一个checkbox实现了 全选 反选 最后个checkbox实现了 取消选择 这里只是做一个 JS实例罢了. 这段HTML并没有 实际的价值. javascript 全选/反选效果. 标题 时间 我们 2010-02-02 我们 2010-02-02 我们 2010-02-02 我们 2010-02-02     var $=function(id){return document.getElementById(id);}; var

  • jQuery菜单实例(全选,反选,取消)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="全选" onclick="chec

  • 基于JavaScript实现复选框的全选和取消全选

    基于JavaScript实现复选框的全选和取消全选

    本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下 效果图: 测试代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head>

  • Jquery CheckBox全选方法代码附js checkbox全选反选代码

    jquery方法如下: 复制代码 代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为

  • vue 实现搜索的结果页面支持全选与取消全选功能

    演示地址,打开.搜索.随便点 http://msisliao.github.io/dem... npm i element-ui -S // main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) demo功能概览 默认没有全选,搜索时支持全选与取消全选, 将选择的数据添加到已选中,已选删除时改变当前搜索列表的状态与全选按钮的状态 全选时

  • Javascript实现CheckBox的全选与取消全选的代码

    Javascript实现CheckBox的全选与取消全选的代码

    本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强. 效果图:运行查看效果: function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i 字母全选开关 a b c d e f g 数字全选开关 1 2 3 [Ctrl+A 全选 注

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • js实现复选框的全选和取消全选效果

    在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: 以下是代码: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <titl

  • JQUERY CHECKBOX全选,取消全选,反选方法三

    jquery.checkboxes.zip,然后解压引用到使用插件的页面,这个不用多说了吧!下面看具体例子,为了让大家更好的理解,我直接把实现功能的代码贴出来: 复制代码 代码如下: $("#myform").toggleCheckboxes()//全选,取消全选,反选 $("#myform").toggleCheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform"

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

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

    本文实例为大家分享了javaScript实现复选框全选反选的具体代码,供大家参考,具体内容如下 代码 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title

随机推荐