100字范文 > Javascript特效：表单选中取消选中反选

Javascript特效：表单选中取消选中反选

时间：2018-07-21 13:37:36

知识点

使用addEventListener可以避免变量全局污染。

如果想让某个节点元素的状态取反，可以进行取反操作。

单选按钮，增加checked属性，会使其变为选中状态。

Element.type = !Element.type

querySelectorAll通过选择器获取节点标签。

运行效果

代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}#panel{width: 400px;box-shadow: 0 0 10px #000;margin: 100px auto;padding: 20px;}.panel-header{text-align: center;margin-bottom: 10px}.panel-content{display: flex;flex-direction: column;justify-content: space-around;font-size: larger}.panel-footer{text-align: center;margin-top: 10px}</style></head><body><div id="panel"><section class="panel-header"><h2>歌曲排行榜</h2><hr></section><section class="panel-content"><label><input type="checkbox">1. 野狼Disco</label><label><input type="checkbox">2. 这一生关于你的风景</label><label><input type="checkbox">3. 一生与你擦肩而过</label><label><input type="checkbox">4. 好几年</label><label><input type="checkbox">5. 你的答案</label><label><input type="checkbox">6. 下山</label><label><input type="checkbox">7. 欧若拉</label><label><input type="checkbox">8. 庸人自扰</label><label><input type="checkbox">9. 一百万个可能</label></section><section class="panel-footer"><hr><button id="allSelect">全选</button><button id="cancelSelect">取消选中</button><button id="reverseSelect">反选</button></section></div><script>window.onload = function (ev) {// 1. 获取所有复选框var inputs = document.querySelectorAll('input');// 2. 全选事件$('allSelect').addEventListener('click', function (ev1) {for (var i = 0; i < inputs.length; i++) {var input = inputs[i];input.checked = true;}});// 3. 取消选中事件$('cancelSelect').addEventListener('click', function (ev1) {for (var i = 0; i < inputs.length; i++) {var input = inputs[i];input.checked = false;}});// 4. 反选$('reverseSelect').addEventListener('click', function (ev1) {for (var i = 0; i < inputs.length; i++) {var input = inputs[i];input.checked = !input.checked;}});};/*** 通过id名获取元素* @param {string}id* @returns {any}*/function $(id) {return typeof id === 'string' ? document.getElementById(id) : null;}</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。