checkbox实现全选的多种方法 不断更新 原创

代码如下:

<script language=javascript>
//第一种方法
function selectall1()
{
   var a = document.getElementsByTagName("input");
   if(a[0].checked==true){
   for (var i=0; i<a.length; i++)
      if (a[i].type == "checkbox") a[i].checked = false;
   }
   else
   {
   for (var i=0; i<a.length; i++)
      if (a[i].type == "checkbox") a[i].checked = true;
   }
}

//第二种方法

function selectall2() {
 var tform = document.forms['form1'];
 for (var i=0;i<tform.length;i++)
 {
  var e = tform.elements[i];
  if (e.type == "checkbox")
   e.checked = !e.checked;
 }
}

//第三种方法，结合上述两种方法
function selectall3()
{
   var a = document.getElementsByTagName("input");
   for (var i=0; i<a.length; i++)
      if (a[i].type == "checkbox") a[i].checked =!a[i].checked;
  }
//第四种方法
function selectall4(id){ //用id区分 
var tform=document.forms['form1']; 
for(var i=0;i<tform.length;i++){ 
var e=tform.elements[i]; 
if(e.type=="checkbox" && e.name==id) e.checked=!e.checked; 
} 
}
//第五种方法
function selectall(theform,thename){ //theform指定的form,thename是checkbox的name属性
var tform=document.forms[theform];
document.getElementById("thewen").value='反选';
for(var i=0;i<tform.length;i++){
   var e=tform.elements[i];
   if(e.type=='checkbox' && e.name==thename)e.checked=!e.checked;
  }
}
</script>
<form id="form1" name="form1" method="post" action="">
  <input type="checkbox" name="sid" value="1" />
  <input name="thes" type="button" onclick="javascript:selectall3()" value="全选" />
</form>

//第一种方法
function selectall1()
{
var a = document.getElementsByTagName("input");
if(a[0].checked==true){
for (var i=0; i[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

PS:上述三种方法，都可实现效果，但如果想实现(全选|反选)，就需要根据要求添加

赞 (0)

相关推荐

  • checkbox实现全选的多种方法 不断更新 原创

    复制代码 代码如下: <script language=javascript> //第一种方法 function selectall1() {    var a = document.getElementsByTagName("input");    if(a[0].checked==true){    for (var i=0; i<a.length; i++)       if (a[i].type == "checkbox") a[i].ch

  • 两种不同的方法实现js对checkbox进行全选和反选

    通过两种不同的方法实现用js来对checkbox进行全选和反选: 方法一: 1:js实现checkbox的 全选 功能: 复制代码 代码如下: function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox") { c

  • 用自定义图片代替原生checkbox实现全选,删除以及提交的方法

    用自定义图片代替原生checkbox实现全选,删除以及提交的方法

    UI妹子觉得原生的checkbox复选框太丑,非要用图片来代替,那就依她.做出来的效果类似这样: 要代替原生的checkbox. 那么要实现原生checkbox能干的事.我们主要实现这几点就可以了. 1.点击列表中的勾选图片.图片会变换成相反的. 2.如果当前是全选状态,不勾选列表中的某一项,全选处的图片变成未勾选的状态. 如果点击了某一项使列表成了全选的状态, 全选处的图片变成勾选状态. 3.全选功能 4.点击删除,能删除全部的勾选的图片. 1.准备工作:因为要大量用到两个图片的切换,我们单独

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • jQuery+php简单实现全选删除的方法

    本文实例讲述了jQuery+php简单实现全选删除的方法.分享给大家供大家参考,具体如下: <input type="checkbox" id="ckb_selectAll" onclick="selectAll()" title="选中/取消选中"> <a href="javascript:void(0);" onclick="del_()" title="

  • javascript实现checkBox的全选，反选与赋值

    我们平时在做项目的时候,经常会遇到需要实现实现checkBox的全选,反选与赋值的情况,网上也有许多的范例,这里给大家分享的是本人常用的方法,推荐给大家. 复制代码 代码如下: //js 数值是否在数组中 Array.prototype.in_array = function(e){ for(i=0;i<this.length;i++){ if(this[i] == e) return true; } return false; } //js数组index Array.prototype.fin

  • Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)

    Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)

    ListView控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adapter的用法,加了很多的判断等等等等-.我们先来看看实现的效果吧! 好的,我们新建一个项目LvCheckBox 我们事先先把这两个布局写好吧,一个是主布局,还有一个listview的item.xml,相信不用多说 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • php+ajax简单实现全选删除的方法

    本文实例讲述了php+ajax简单实现全选删除的方法.分享给大家供大家参考,具体如下: <input type="checkbox" id="ckb_selectAll" onclick="selectAll()" title="选中/取消选中"> <a href="javascript:void(0);" onclick="del_()" title="删除

  • vue使用vant中的checkbox实现全选功能

    本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码,供大家参考,具体内容如下 <template> <div class="visiblePeople"> <topbar /> <ul class="list clear_float"> <li v-for="(item, index) in people" :key="index"> &

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

随机推荐