您的位置 首页 javascript教程

JavaScript如何实现“全选”和"全不选"功能?(代码示例)

本篇文章给大家介绍一下使用JavaScript实现“全选”和"全不选"功能的方法,文中通过示例代码介绍的非常详细。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

代码如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><script>  function clickon() {    // 获取到body中所有checkbox    var checkbox = document.querySelectorAll("input[type='checkbox']");    for (var i = 0; i < checkbox.length; i++) {      checkbox[i].checked = true;    }  }  function unclick() {    var checkbox = document.querySelectorAll("input[type='checkbox']");    for (var i = 0; i < checkbox.length; i++) {      checkbox[i].checked = false;    }  }</script><body><form>  <input type="checkbox">吃  <input type="checkbox">喝  <input type="checkbox">拉  <input type="checkbox">撒  <input type="button" value="全选" onclick="clickon()">  <input type="button" value="全不选" onclick="unclick()"></form></body></html>

效果

更多jQuery、Javascript特效,推荐访问:js特效大全!

以上就是JavaScript如何实现“全选”和"全不选"功能?(代码示例)的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:JavaScript如何实现“全选”和"全不选"功能?(代码示例)

文章地址:https://www.pyhw.net/31185_javascript%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%85%a8%e9%80%89%e5%92%8c%e5%85%a8%e4%b8%8d%e9%80%89%e5%8a%9f%e8%83%bd%ef%bc%9f%ef%bc%88%e4%bb%a3%e7%a0%81%e7%a4%ba.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图