DOM操作复选框
DOM操作复选框
实现一个效果如下图:
点击"全选/全不选"复选框之后,足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后,被选中的所有都变成未选中。点击"全选"按钮之后,
足球、篮球、游泳和唱歌均被选取,点击"全不选"之后,被选中的所有都变成未选中。点击反选之后,未选中的变成选中的,选中的变成未选中的。
下面我们来实现这个效果。
源代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>js测试</title>
- </head>
- <body>
- 您的爱好很广泛!!!
- <br>
- <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
- <br>
- <input type="checkbox" name="items" value="足球" />足球
- <input type="checkbox" name="items" value="篮球"/>篮球
- <input type="checkbox" name="items" value="游泳"/>游泳
- <input type="checkbox" name="items" value="唱歌"/>唱歌
- <br>
- <input type="button" name="checkall" id="checkall" value="全选" />
- <input type="button" name="checkall" id="checkallNo" value="全不选" />
- <input type="button" name="checkall" id="check_revsern" value="反选" />
- </body>
- <script language="javascript">
- window.onload=function(){
- //实现全选
- document.getElementById("checkall").onclick=function(){
- var itemElements=document.getElementsByName("items");
- for(var i=0;i<itemElements.length;i++){
- //方法1
- //itemElements[i].setAttribute("checked","checked");
- //方法2
- itemElements[i].checked="checked";
- }
- }
- //实现全不选
- document.getElementById("checkallNo").onclick=function(){
- var itemElements=document.getElementsByName("items");
- for(var i=0;i<itemElements.length;i++){
- //方法1,IE可以,其他浏览器不支持
- //itemElements[i].setAttribute("checked",null);
- //方法2,都行
- itemElements[i].checked=null;
- }
- }
- //实现反选
- document.getElementById("check_revsern").onclick=function(){
- var itemElements=document.getElementsByName("items");
- for(var i=0;i<itemElements.length;i++){
- //itemElements[i].checked:如果选中为true,否则false
- if(itemElements[i].checked){
- itemElements[i].checked=null;
- }else{
- itemElements[i].checked="checked";
- }
- }
- }
- //全选/全不选复选框的功能
- document.getElementById("checkItems").onclick=function(){
- var itemElements=document.getElementsByName("items");
- for(var i=0;i<itemElements.length;i++){
- //itemElements[i].checked:如果选中为true,否则false
- if(this.checked){
- itemElements[i].checked=null;
- }else{
- itemElements[i].checked="checked";
- }
- }
- }
- }
- </script>
- </html>
DOM操作复选框的更多相关文章
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- 对jquery操作复选框
摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...
- javascript 操作复选框无效
<script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...
- jquery操作复选框(checkbox)十二技巧
jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...
- js操作复选框 复选框
//复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']&quo ...
- js操作复选框
js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...
- jQuery 操作复选框(checkbox) attr checked不起作用
参考资料 http://www.paobuke.com/develop/javascript/pbk849.html 这天用到jQuery功能,想实现一个简单的复选框动态全选或全不选,结果测试发现 ...
- jQuery操作复选框的简单使用
开发中为了实现一个小功能,就是复选框的相互影响事件,如下图: 就是通过复选框设置权限,权限是分等级的,这是一个web管理系统的应用,一个管理员具有三个权限赋予,权限也是有等级的,其中删除和编辑权限相当 ...
- Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置
QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有m ...
随机推荐
- hadoop群集 启动
###注意:严格按照下面的步骤 .5启动zookeeper集群(分别在itcast04.itcast05.itcast06上启动zk) cd /itcast/zookeeper-/bin/ ./zkS ...
- socketpair初识
#include <stdio.h> #include <string.h> #include <unistd.h> #include <sys/typ ...
- Redis可以作为简单搜索引擎优化查询
在日常开发中在遇到一些大数据量的查询的时候,其实可以换种思路采用redis事先都缓存起来,然后通过redis里面进行结果集的运算. 原来的做法可能是 查询SQL太复杂,然后将SQL进行拆分成多个子SQ ...
- arduino 串口数据啊按字节分析
#include <avr/wdt.h> #include <SoftwareSerial.h> #include <EEPROM.h> #define FPIN ...
- 【转】Paxos算法2-算法过程
——转自:{老码农的专栏} 1.编号处理 根据P2c ,proposer在提案前会先咨询acceptor查看其批准的最大的编号和value,再决定提交哪个value.之前我们一直强调更高编号的prop ...
- UVa 11178 Morley's Theorem (几何问题)
题意:给定三角形的三个点,让你求它每个角的三等分线所交的顶点. 析:根据自己的以前的数学知识,应该很容易想到思想,比如D点,就是应该求直线BD和CD的交点, 以前还得自己算,现在计算机帮你算,更方便, ...
- Java Toolkit类用法
这是一个AWT工具箱.它提供对本地GUI最低层次的JAVA访问.在大多情况下,这个类不直接用在小应用程序或应用程序中.具有把行图形数据转换为可显示的图像.返回字体信息.得出显示尺寸和分辨率以及获得系统 ...
- 3D indoor map positioning with a smartphone image
menu 1. 基于Tango的三维建模技术(SLAM)(视觉SLAM,RGBD单目深度摄像机+罗盘仪)导出或不导出->Android 三维游戏开发技术(普通Android手机) 2. 基于An ...
- Hdu1728 逃离迷宫 2017-01-17 10:56 81人阅读 评论(0) 收藏
逃离迷宫 Time Limit : 1000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submissi ...
- android 热更新nuwa
简介 Nuwa是比较流行的一种Android热补丁方案的开源实现,它的特点是成功率高,实现简单.当然,热补丁的方案目前已经有很多了,AndFix, Dexposed, Tinker等,之所以要分析Nu ...