Implementing all-selecting and deselecting checkboxes based on JavaScript-JS Tutorial-php.cn

Implementing all-selecting and deselecting checkboxes based on JavaScript

高洛峰

Release： 2017-02-11 15:45:48

Original

1188 people have browsed it

This article mainly introduces in detail the implementation of selecting all and deselecting all check boxes based on JavaScript. It has a certain reference value. Interested friends can refer to it.

The example of this article is We have shared the specific code for selecting all and deselecting all of the js checkbox for your reference. The specific content is as follows

Rendering:

Implementing all-selecting and deselecting checkboxes based on JavaScript

Test The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    li{list-style: none;}
  </style>
</head>
<body>
  <p class="first">
    <ul class="frtInfo">
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpa"/>液体</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpb"/>粉末</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpd"/>纯电池</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpe"/>危险品</label>
      </li>
      <li class="same">
        <label><input type="checkbox" name="wp" value="wpd"/>配套电池</label>
      </li>
      <li class="same select">
        <label><input id="allChecked" class="allChk" type="button" name="sel" value="全选/取消" onclick="selectAllDels()"/></label>
      </li>
    </ul>
  </p>
  <script src="../js/jquery-1.11.3.js"></script>
  <script type="text/javascript">
    /*全选或取消全选*/
    function selectAllDels(){
      var allWp=document.getElementsByName("wp");
      var selOrUnsel=false;
      for(var i=0; i<allWp.length;i++){
        if(allWp[i].checked){
          selOrUnsel=true;
          break;
        }
      }
      if (selOrUnsel){
        allUnchk(allWp);
      }else{
        allchk(allWp);
      }
    }
    function allchk(allWp){
      for(var i=0; i<allWp.length;i++ ){
        allWp[i].checked=true;
      }
    }
    function allUnchk(allWp){
      for(var i=0; i<allWp.length;i++){
        allWp[i].checked=false;
      }
    }
  </script>
</body>
</html>

Copy after login

Direct copy of the code is available.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to implementing checkbox all selection and deselection based on JavaScript, please pay attention to the PHP Chinese website!