1. 程式人生 > >checkbox全選/全不選的三種方法

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