checkbox：全选、全不选、单选（慕课网题目）

任务

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>

转载于:https://www.cnblogs.com/sunxirui00/p/7501802.html

checkbox：全选、全不选、单选（慕课网题目）相关推荐

编程挑战JavaScript进阶篇（慕课网题目）
编程挑战现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居总价20万买一居 200万内购五环三居 140万安家东三 ...
DOM编程练习（慕课网题目）
编程练习制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 效果:如红框中部分. 一选全选:表头上的单选框选中则下面每行都选中. 全选一选:表中数据每行都 ...
Vue+Vant制作单选全选全不选以及删除按钮van-checkbox
在官网上看到vant组件特别好用,就尝试使用checkbox制作单选全选,由于是下午头脑不清楚所以没想通思路,导致了一部分的错误,经过我的老大指点,才想通如此简单的思路,就是都亮和都不亮的区别. 全选 ...
【转】Android 带checkbox的listView 实现多选，全选，反选 -- 不错
原文网址:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://download.csdn.net ...
easyui中checkbox全选全不选的时不处理最后一行的实现
有这样一个需求, easyui加载datagrid后, 最后一行为统计行, 在进行全选全不选的时候会将统计行也一并选择, 这跟业务不相符, 琢磨了半天后终于找到了解决方案 1.首先记录下统计功能的实现 ...
jQuery实现checkBox全选全取消
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
checkbox的listView 实现多选，全选，反选
主函數<span style="font-family: Arial, Helvetica, sans-serif;">Activity的设置</span> ...
Android 带checkbox的listView 实现多选，全选，反选
由于listview的一些特性,刚开始写这种需求的功能的时候都会碰到一些问题,重点就是存储每个checkbox的状态值,在这里分享出了完美解决方法: 布局文件: [html] view plainco ...
带checkbox的listView 实现多选，全选，反选
转载自csdn作者:mavenly 链接:http://blog.csdn.net/onlyonecoder/article/details/8687811 Demo地址(0分资源):http://d ...

checkbox：全选、全不选、单选（慕课网题目）

任务

checkbox：全选、全不选、单选（慕课网题目）相关推荐

最新文章

热门文章