checkbox全选/全不选的三种方法

最新推荐文章于 2025-11-18 21:08:58 发布

转载最新推荐文章于 2025-11-18 21:08:58 发布 · 3w 阅读

文章标签：

#input #function

javascript学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在网页中使用JavaScript实现全选与全不选checkbox的三种方法，包括方法一、方法二和方法三。方法一通过直接访问元素实现全选与全不选，方法二通过获取所有input元素并循环操作，方法三则通过监听checkbox的状态变化来实现全选与全不选。最后指出方法二和方法三的区别与优缺点。

checkbox全选/全不选

/*方法一：*/

function checkAll(cName) {

  var code_Values = document.all[checkbox_name];

  if (code_Values.length) {
    for ( var i = 0; i < code_Values.length; i++) {
      code_Values[i].checked = true;
    }
  } else {
   code_Values.checked = true;
  }
}

 

function uncheckAll(cName) {

  var code_Values = document.all[checkbox_name];

  if (code_Values.length) {
    for ( var i = 0; i < code_Values.length; i++) {
      code_Values[i].checked = false;
    }
  } else {
    code_Values.checked = false;
  }
}

<input type="checkbox" name="check" onclick="checkAll('check');"/><a onclick="check.click()">全选</a>

/*方法二：*/

function checkAll() {

  var code_Values = document.getElementsByTagName("input");

  for (i = 0; i < code_Values.length; i++) {

    if (code_Values[i].type == "checkbox") {

      code_Values[i].checked = true;

    }
  }
}


function uncheckAll() {

  var code_Values = document.getElementsByTagName("input");
  for (i = 0; i < code_Values.length; i++) {
  if (code_Values[i].type == "checkbox") {
    code_Values[i].checked = false;
  }
}
}

<input type="checkbox" name="check" onclick="checkAll('check');"/><a onclick="check.click()">全选</a>

/*方法三：*/

function check_all(obj, cName) {

  var checkboxs = document.getElementsByName(cName);
  for ( var i = 0; i < checkboxs.length; i+=1) {
    checkboxs[i].checked = obj.checked;
  }
}

<input type="checkbox" name="check" onclick="checkAll(this,'check');"/><a onclick="check.click()">全选</a>

第二种方法显然是不方便的方法，如果页面上有多个checkbox组，就不能分别控制。

第三种方法最为简便，一个checkbox就可以了。

原文链接地址：http://sumskyjia.iteye.com/blog/1109450