任务

1.在第27行处补充完整，实现当点击"全选"按钮时，将选中所有的复选项。

  1. 提示:document.getElementsByTagName("input")获取的是所有input标签，包括复选项和按钮，所以要判断是否是复选项，如是选中。

2.在第33行处补充完整，实现当点击"全不选"按钮时，将取消所有选中的复选项。

3.在第40行处补充完整，在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项。

我的解答

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5.     <title>无标题文档</title>
  6. </head>
  7.  
  8. <body>
  9. <form>
  10.     请选择你爱好:<br>
  11.     <input type="checkbox" name="hobby" id="hobby1">  音乐
  12.     <input type="checkbox" name="hobby" id="hobby2">  登山
  13.     <input type="checkbox" name="hobby" id="hobby3">  游泳
  14.     <input type="checkbox" name="hobby" id="hobby4">  阅读
  15.     <input type="checkbox" name="hobby" id="hobby5">  打球
  16.     <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
  17.     <input type="button" value = "全选" onclick = "checkall();">
  18.     <input type="button" value = "全不选" onclick = "clearall();">
  19.     <p>请输入您要选择爱好的序号，序号为1-6:</p>
  20.     <input id="wb" name="wb" type="text" >
  21.     <input name="ok" type="button" value="确定" onclick = "checkone();">
  22. </form>
  23. <script type="text/javascript">
  24.     function checkall(){
  25.         var hobby = document.getElementsByTagName("input");
  26.         for(var i = 0;i<hobby.length;i++){
  27.             if(hobby[i].type == "checkbox"){
  28.                 hobby[i].checked = true;
  29.             }
  30.         }
  31.     }
  32.     function clearall(){
  33.         var hobby = document.getElementsByName("hobby");
  34.         for(var i = 0;i<hobby.length;i++){
  35.             hobby[i].checked = false;
  36.         }
  37.     }
  38.     function checkone(){
  39.         var hobby = document.getElementsByName("hobby");
  40.         for(var i = 0;i<hobby.length;i++){
  41.             hobby[i].checked = false;
  42.         }
  43.         var j=document.getElementById("wb").value;
  44.         hobby[j-1].checked = true;
  45.     }
  46.  
  47. </script>
  48. </body>
  49. </html>

checkbox：全选、全不选、单选（慕课网题目）的更多相关文章

  1. 编程挑战JavaScript进阶篇（慕课网题目）

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  2. DOM编程练习（慕课网题目）

    编程练习 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...

  3. JS内置对象练习（慕课网题目）

    效果图: XXXX年XX月X日 星期X--班级总分为:81 格式要求: 1.显示打印的日期. 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间. 2.计算出该班级的平均分(保留整数). 同学 ...

  4. 练习-checkbox 全选 ，反选， 单选，以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  5. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  6. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  7. checkbox实现全选全不选

    1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...

  8. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  9. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

随机推荐

  1. date format记录

    各种日期格式定义,容易忘记,这里备注下: * 支持格式为 yyyy.MM.dd G 'at' hh:mm:ss z 如 '2002-1-1 AD at 22:10:59 PSD'<br> ...

  2. 关于animate的一些属性

    animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 " ...

  3. confluence的使用

    搜索文档的技巧 在confluence中进行搜索的时候,也需要使用通配符.比如搜索cmscontext,需要这么搜索cmscontex*,如果搜索的话,cmscontext.geturl是会被过滤掉的 ...

  4. codeforces 441C. Valera and Tubes 解题报告

    题目链接:http://codeforces.com/problemset/problem/441/C 题目意思:将n * m 的矩阵分成 k 堆.每堆是由一些坐标点(x, y)组成的.每堆里面至少由 ...

  5. 基于阿里云上实现全站https的正确姿势(一)

    对应的网址:https://yq.aliyun.com/articles/65199 摘要: 目前主流大厂的网站和服务都已经实现了全站https, 例如: baidu, taobao, jd等. 关于 ...

  6. BZOJ_4276_[ONTAK2015]Bajtman i Okrągły Robin_线段树优化建图+最大费用最大流

    BZOJ_4276_[ONTAK2015]Bajtman i Okrągły Robin_线段树优化建图+最大费用最大流 Description 有n个强盗,其中第i个强盗会在[a[i],a[i]+1 ...

  7. MYSQL数据库学习----插入、更新、删除

    一:插入数据 1 为表的所有字段插入数据 INSERT INTO 表名 (值1,值2, 值3...); 2 为表的指定字段插入数据 INSERT INTO 表名(字段1,字段2,...) VALUES ...

  8. 超实用的JavaScript技巧及最佳实践给

    1.数组创建一个随机项 var items = [12,548,'a',2,5478,'foo',8852,,'Doe',2145,119]; var randomItem = items[Math. ...

  9. hihocoder 1331 扩展二进制数(递归)

    传送门 题意 略 分析 由低位向高位考虑,令f(n)为n的扩展二进制数表示数 1.当前数为偶数,末位为0或2,那么f(n)=f(n/2)+f(n/2-1) 2.当前数为奇数,末位为1,那么f(n)=f ...

  10. Codeforces645B【树状数组求逆序数】

    题意: 给你1-n的序列,然后有k次机会的操作,每一次你可以选择两个数交换. 求一个最大的逆序数. 思路: 感觉就是最后一个和第一个交换,然后往中间逼近,到最终的序列,用树状数组求一下逆序数. #in ...