您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

JavaScript实现全选和全不选操作

51自学网 2022-05-02 21:31:57
  javascript

本文实例为大家分享了JavaScript实现全选和全不选操作的具体代码,供大家参考,具体内容如下

效果示例

默认状态下:

勾选全选时:

任意取消勾选物品A/物品B/物品C时

实现代码

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>全选</title>  <script>   function myAll() {    var all = document.getElementById("all");    var oneList = document.getElementsByName("one");    for(var i = 0; i < oneList.length; i++) {     oneList[i].checked = all.checked;    }   }   function myOne() {    var all = document.getElementById("all");    var oneList = document.getElementsByName("one");    for(var i = 0; i < oneList.length; i++) {     if(oneList[i].checked == false) {      all.checked = false;      return;     }    }    all.checked = true;   }  </script> </head> <body>  <table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">   <tr>    <th>全选<input id="all" type="checkbox" onclick="myAll()" /></th>    <th>序号</th>    <th>名称</th>    <th>单价</th>    <th>数量</th>    <th>总计</th>   </tr>   <tr>    <td><input name="one" type="checkbox" onclick="myOne()" /></td>    <td>1</td>    <td>物品A</td>    <td>¥55</td>    <td>1</td>    <td>¥55</td>   </tr>   <tr>    <td><input name="one" type="checkbox" onclick="myOne()" /></td>    <td>2</td>    <td>物品B</td>    <td>¥70</td>    <td>1</td>    <td>¥70</td>   </tr>   <tr>    <td><input name="one" type="checkbox" onclick="myOne()" /></td>    <td>3</td>    <td>物品C</td>    <td>¥66</td>    <td>1</td>    <td>¥66</td>   </tr>  </table> </body></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


Ajax 文件上传进度监听之upload.onprogress案例详解
Vue.js性能优化N个技巧(值得收藏)
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1