JavaScript 复选框全选和取消全选效果

快乐打工仔 分类:实例代码

分享一段代码实例,它利用原生JavaScript实现了复选框的全选和不全选效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#_head {
  background-color: green;
}
#_head {
  text-align: center;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #c0c0c0;
  width: 300px;
}
th,td {
  border: 1px solid #d0d0d0;
  color: #404060;
  padding: 10px;
}
th {
  background-color: #09c;
  font: bold 16px "微软雅黑";
  color: #fff;
}
td {
  font: 14px "微软雅黑";
  text-align: center;
}
</style>
</head>
<body>
<div id="wrapbox">
  <table>
    <thead id="_head">
      <tr>
        <th><input type="checkbox" id="qx"></th>
        <th>菜名</th>
        <th>厨师</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody id="_tbody">
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧鱼</td>
        <td>张一</td>
        <td>18</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧肉</td>
        <td>张二</td>
        <td>18</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧狮子头</td>
        <td>张三</td>
        <td>18</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧小青菜</td>
        <td>张四</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
var qx = document.getElementById('qx');
var tbody = document.getElementById('_tbody')
var inputs = tbody.getElementsByTagName("input");

qx.onclick = function() {
  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i]
    input.checked = qx.checked;
  }
}
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.onclick = function() {
    var flag = true;
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      if (input.checked == false) {
        flag = false;
      }

      if (flag == true) {
        qx.checked = true;
      } else {
        qx.checked = false;
      }
    }
  }
}
</script>
</body>
</html>

JavaScript 复选框全选和取消全选效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript 复选框全选和取消全选效果就介绍到这了。

JavaScript 复选框全选和取消全选效果属于前端实例代码,有关更多实例代码大家可以查看

JavaScript 复选框全选和取消全选效果

回复

我来回复
  • 暂无回复内容