原生JavaScript练习—

HTML：

    <label ><input id="all" type="checkbox">全选</label><hr><input type="checkbox">魅族<br><input type="checkbox">小米<br><input type="checkbox">华为<br><input type="checkbox">一加<br><input type="checkbox">苹果<br><input type="checkbox">三星<br><input type="checkbox">努比亚<br><input type="checkbox">OPPO<br><input type="checkbox">Vivo<br>

Javasript：

window.onload = function () {
// 获取全选按钮var all = document.getElementById('all');
// 添加点击事件all.onclick = function () {var boxs = document.getElementsByTagName('input');
// 遍历所有input标签for(var i = 0 ; i < boxs.length ; i++){
// 使全选按钮的选中状态与其他所有input标签状态一致boxs[i].checked = all.checked;}}}

转载于:https://www.cnblogs.com/luohaoran/p/5919455.html

原生JavaScript练习——全选相关推荐

采用JAVASCRIPT实现全选的三种情况
通常采用JAVASCRIPT实现页面全选的,主要有下面三种情况: 1. 当前页面中所有的CHECKBOX全部选中及取消 . 2. 当前页面中所有同名的CHECKBOX全部选中. 3.当前页面中所 ...
jQuery/javascript实现全选全不选
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习< ...
【java奇思妙想】关于JavaScript实现全选，全不选以及反选功能的示例
代码实现 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
JavaScript案例全选获取下拉框选中的值
<script type="text/javascript">function choice(obj){var checkbox = document.getEleme ...
原生js实现全选和反选的功能 --冯浩的博客
思路:首先我们获取节点遍历每个节点获取到checked的属性然后我们通过改变checked的属性改变选中的状态全选的时候我们让他们都为true 反选的时候我们使用!达到效果本次使用到的知识点有: ...
JavaScript实现全选/全不选操作
效果示例默认状态下: 勾选全选时: 任意取消勾选物品A/物品B/物品C时实现代码 <!DOCTYPE html> <html><head><meta ch ...
JavaScript解决方案全选的取消为什么DOM在事件中的循环需要用this而不能用数组
遇到问题本来的要求是全选后取消其中任何一项即可取消全选按钮,但是在取消一个选项后全选按钮并没有消失附上代码 <!DOCTYPE html> <html lang="zh ...
JavaScript实现全选和取消全选
源代码 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8& ...
javascript练习----复选框全选，全不选，反选
第一种方式: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...

原生JavaScript练习——全选

原生JavaScript练习——全选相关推荐

最新文章

热门文章