你的位置:首页 > 软件开发 > Java > JavaScript、全选反选

JavaScript、全选反选

发布时间:2016-01-04 20:00:11
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选反选</title>&l ...

JavaScript、全选反选

JavaScript、全选反选

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>全选反选</title></head><body>    <input type="button" value="全选" id="all">  <input type="button" value="反选" id="reverse">  <input type="checkbox" id="flagCheck">  <ul id="checkboxList">    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>    <li><input type="checkbox"></li>  </ul>  <p>    布尔属性,只要name即可,值可为空    checked,selected,readonly,disabled....  </p>  <script type="text/javascript">  //1.找节点  var allBtn = document.querySelectorAll("#all")[0];  var reverseBtn = document.querySelector("#reverse");  var flagCheck = document.getElementById("flagCheck");  var checkList = document.querySelectorAll("#checkboxList input");  function checkAll() {    for(var j = 0; j < checkList.length; j++) {      if(!checkList[j].checked) {        break;      }    }    if(j == checkList.length) {      // alert("全部为真")      flagCheck.checked = true;    }else {      // alert("至少一个不为真");      flagCheck.checked = false;    }  }  //2.加事件  //全选  allBtn.onclick = function() {    if(flagCheck.checked) {      flagCheck.checked = false;      for(var i = 0; i < checkList.length; i++) {        checkList[i].checked = false;      }    }else {      flagCheck.checked = true;      for(var i = 0; i < checkList.length; i++) {        checkList[i].checked = true;      }    }      }  //反选  reverseBtn.onclick = function() {    for(var i = 0; i < checkList.length; i++) {      if(checkList[i].checked) {        checkList[i].checked = false;      }else {        checkList[i].checked = true;      }    }    //执行检查所有checkList是否被选上了    checkAll();  }  for(var i = 0; i < checkList.length; i++) {    checkList[i].onclick = checkAll;  }  </script></body></html>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:JavaScript、全选反选

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。