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

知识点

使用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>

Javascript特效：表单选中、取消选中、反选相关推荐

JavaScript实现表单的全选,反选,获取值
构思通过for循环和for in循环来实现,界面效果如下步骤全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...
php中表单的非空验证,Javascript的表单与验证-非空验证_javascript技巧
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...
用 Javascript 验证表单（form）中多选框（checkbox）值
和单选框一样,许多新手在用 Javascript 验证表单(form)中多选框(checkbox)的值时,都会遇到问题,原因是 checkbox 和普通的文本框在获取值的时候有很大不同,本文介绍了一个 ...
JavaScript常用表单验证
JavaScript常用表单验证目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判 ...
如何通过纯javascript实现表单提交
如何通过纯javascript实现表单提交通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交.有些地方,我想使用纯JS实现,比方简单的登陆跳转.话不多说,看原代 ...
Javascript实现表单检验（如注册界面）
Javascript实现表单检验(以注册界面为例) 正如我们所见到的,好多网页都有注册界面,在注册界面中,最常见的即是包括用户名.密码.请重复输入密码和一个"注册"按钮,今天我们就 ...
html5 表单必填项,javascript - HTML5表单必填属性。设置自定义验证消息？
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
用JavaScript获取表单里的值
建立form表单里的标签: 文本输入框,密码输入框,单选框,多选框,下拉框,文本域,隐藏域用JavaScript获取表单里的每一个值, 将值显示出来. 填写数据获取的值如下: < ...
Javascript阻止表单提交
Javascript阻止表单提交 Html 1.<form name="loginForm" action="login.aspx" method=&qu ...
js表单提交 php,JavaScript提交表单的几种方法
在我们工作中我们会经常使用到form表单,相信大家再熟悉不过了,那么提交表单有很多种方法,JavaScript提交表单的方法又是如何呢,今天就带大家介绍下JavaScript提交表单的几种方法! 第一 ...

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

知识点

运行效果

代码

Javascript特效：表单选中、取消选中、反选相关推荐

最新文章

热门文章