<!DOCTYPE HTML>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

         <title>无标题文档</title>

     </head>

     <body>

         <form>

           请选择你爱好:<br>

           <input type="checkbox" name="hobby" id="hobby1">  音乐

           <input type="checkbox" name="hobby" id="hobby2">  登山

           <input type="checkbox" name="hobby" id="hobby3">  游泳

           <input type="checkbox" name="hobby" id="hobby4">  阅读

           <input type="checkbox" name="hobby" id="hobby5">  打球

           <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>

           <input type="button" value = "全选" onclick = "checkall();">

           <input type="button" value = "全不选" onclick = "clearall();">

           <p>请输入您要选择爱好的序号，序号为1-6:</p>

           <input id="wb" name="wb" type="text" >

           <input name="ok" type="button" value="确定" onclick = "checkone();">

         </form>

         <script type="text/javascript">

 //全选

         function checkall(){

             var hobby = document.getElementsByTagName("input");

             for(var i=0;i<hobby.length;i++){

                hobby[i].checked=true;

            }

         }

 //全不选

         function clearall(){

             var hobby = document.getElementsByName("hobby");

                     for(var i=0;i<hobby.length;i++){

                hobby[i].checked=false;

            }

         }

         function checkone(){

             var j=document.getElementById("wb").value;

         var hobby=document.getElementById(('hobby'+j));

        hobby.checked=true;

         }

         </script>

     </body>

 </html>

js实现复选框的全选和全不选的更多相关文章

  1. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  2. 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  3. JQuery的复选框选中、取消、全选，全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  4. [oldboy-django][2深入django]老师管理 -- form表单如何生成多选框标签，多选框的默认值显示，以及多选框数据插入到数据库，多选框数据更改到数据库

    1 form表单如何生成多选框(包含了多选框可选择内容) - Form设置班级输入框为 select多选 - 多选 class TeacherForm(Form): name = fields.Cha ...

  5. jquery如何判断checkbox（复选框）是否被选中 全选 反选

    好长时间没用jq, 之前用的都是ng. 想着随便参考一下,结果被坑.因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google 给出坑人文章的链接 ...

  6. elementUi-复选框，使用v-for循环出来的复选框,默认多个值为勾选状态

    1. 使用 v-model="BottomSelectFor[index].tick" 绑定要默认勾选的状态 2.在数组中定义 tick:true,没有的字段默认为false 3. ...

  7. jquery简单实现复选框的全选与反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. checkebox 全选 ，子复选框单个全部选择后，全选框也会被选择

    <script> //点击全选,子复选框被选中 function demo(){ var allcheck=document.getElementById("allcheck&q ...

  9. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  10. layui复选框

    效果图 layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样 layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了.只可以通过js动态设置 ht ...

随机推荐

  1. 转载： Linux 操作系统挂起、休眠、关机相关命令

    最近每天的工作都难以在当天结束,而本人又不是那种善于熬夜的人,因此就需要将电脑中的工作文件全部保存,以往都是将所有工作文件保存关机,但是最近发现Linux系统有一个好神奇的命令: 休眠: sudo p ...

  2. OpenCV Error: Insufficient memory问题解析

    前言 项目程序运行两个月之久之后突然挂了,出现OpenCV Error: Insufficient memory的错误,在此分析一下该问题. 问题的表现形式: 程序内存使用情况: 问题: OpenCV ...

  3. iPhone/iPad被停用怎么办 3招轻松解锁

    家中小孩玩电脑游戏,自己拿了iPad,随便输入密码,结果造成平板电脑无法使用,相信这是许多家长都将面对或是早已发生的事情.本文整理当iPhone或是iPad被停用时的处理方法. iPhone被停用 为 ...

  4. 解决：VS2010 调试器无法继续继续运行该进程，无法启动调试

    工具栏上突然出现 Model Project选项插件,在调试项目的时候突然出现错误: 按照网上的一些方法弄了后还是同样报错,把本地代码删除后从库上重现拉下来的项目依然报错,到这里就明白不是项目本身问题 ...

  5. vulcanjs schemas&& collections

    一张参考图 说明 从上图我们可以方便的看出schmea 能做的事情 Generate a GraphQL equivalent of your schema to control your Graph ...

  6. 解决python2安装MySQL-python模块报错

    今天电脑重装系统,所有软件都重装一遍,MySQLdb模块一直装不好,纠结了好久,终于解决,方法分享给大家. MySQLdb模块安装: 1.下载MySQL-pyhon模块,网站为:https://pyp ...

  7. 【python】class之super关键字的作用

    在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如代码段1: 代码段1: class A: def __init__(self):    prin ...

  8. samba 挂载windows共享文件夹

    先转载一片文章     centOS下yum安装配置samba 地址 http://blog.csdn.net/linglongwunv/article/details/5212875 遇到问题1 # ...

  9. sql 防注入 维基百科

    http://zh.wikipedia.org/wiki/SQL%E8%B3%87%E6%96%99%E9%9A%B1%E7%A2%BC%E6%94%BB%E6%93%8A SQL攻击(SQL inj ...

  10. php webservice实例(转载)

    首先大家要简单了解了何谓webservice,接下来就做两个非常简单的例子,webservice还是逃不开server端(服务器端) 与client端(客户端) . 做这个测试之前,要确认你的php配 ...