任务

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

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

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

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

我的解答

<!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++){

            if(hobby[i].type == "checkbox"){

                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 hobby = document.getElementsByName("hobby");

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

            hobby[i].checked = false;

        }

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

        hobby[j-1].checked = true;

    }

</script>

</body>

</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. EasyUI+Python-flask实现CRUD应用

    1.需求分析 需求:应用easyui制作前端表格数据显示,flask制作后端路由 环境搭建略 2.easyui前端实现 2.1 easyui是前端实用的一个框架,这里我们要实现的是easyui的CRU ...

  2. Android设备adb授权的原理【转】

    本文转载自:http://blog.csdn.net/zahuopuboss/article/details/50831171 http://blog.csdn.net/sowhat_ah/artic ...

  3. 织梦dedecms如何显示所有文章列表

    本文介绍了dedecms中显示所有文章列表的实现方法,dedecms如何显示所有文章列表,有需要的朋友参考下. 例子,dedecms中显示所有文章列表.   代码示例:{dede:channelart ...

  4. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  5. CentOS 7中ip命令将逐渐取代 ifconfig

    首先看下图: 要安装ip,请点击这里下载iproute2套装工具 .不过,大多数Linux发行版已经预装了iproute2工具. 你也可以使用git命令来下载最新源代码来编译: $ git clone ...

  6. SocketErrorCode:10022

    在编写.net的网络服务器时,我使用了裸socket来实现.在windows上,或者在linux上通过.net core来跑时都没有什么问题,但是通过mono运行调用socket.Bind()时却总是 ...

  7. 计算机科学 —— 时间戳（timestamp）

    时间戳的一个重要属性即是:唯一性,以起到唯一标识的作用: 1. linux 命令行 $ date +%s 1506222745 2. Python 时间戳 内置 time 库 >> tim ...

  8. MyBatis学习 之 七、mybatis各种数据库的批量修改

      MyBatis的update元素的用法与insert元素基本相同,因此本篇不打算重复了.本篇仅记录批量update操作的sql语句,懂得SQL语句,那么MyBatis部分的操作就简单了. 注意:下 ...

  9. JAVA RTTI

    基础类可接收我们发给派生类的任何消息,因为两者拥有完全一致的接口.我们要做的全部事情就是从派生上溯造型,而且永远不需要回过头来检查对象的准确类型是什么.所有细节都已通过多态性获得了完美的控制. 但经过 ...

  10. 打印斐波那契（Fibonacci）数列

    需求:打印 Fibonacci数列 思路: 当前项的值等于前两项数值的和 F=(F-1)+F(F-2) 样例: 输入:10 输出:1 1 2 3 5 8 13 21 34 55 辗转相加法实现 #in ...