关于如何用js完成全选反选框等内容
在学习js过程中按照视频写了这个页面
可以在点上面全选/全不选时全部选中或者取消
在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整
功能比较完善
以下是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选练习</title>
<script>
window.onload = function () {
var items = document.getElementsByName( "items");
var checkedALLBtn = document.getElementById("checkedAllBtn")
checkedALLBtn.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=true;
}
checkedAllBox.checked=true;
}
var checkedNoBtn = document.getElementById("checkedNoBtn")
checkedNoBtn.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false; }
var checkedRevBtn = document.getElementById("checkedRevBtn")
checkedRevBtn.onclick = function () {
checkedAllBox.checked=true;
for (var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
if(!items[i].checked){
checkedAllBox.checked=false;
}
} }
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=checkedAllBox.checked;
}
}
for (var i=0;i<items.length;i++){
items[i].onclick = function () {
checkedAllBox.checked=true;
for (var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked=false;
break;
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是 <input type="checkbox" id="checkedAllBox">全选/全不选
<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" id="checkedAllBtn" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
关于如何用js完成全选反选框等内容的更多相关文章
- js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- js实现全选反选功能
开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); f ...
- js实现全选反选（开关门）
话不多说直接看图吧
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
- JS实现简单的多选选项的全选反选按钮
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮: ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
随机推荐
- 万网上如何将IP和申请的域名绑定
万网上如何将IP和申请的域名绑定 在万网上购买了域名后,怎么将它和指定的IP进行绑定呢?下面简单介绍下 工具/原料 中国万网账号 购买的域名 服务器 方法/步骤 百度万网,找到网站后, ...
- Android Studio真机测试
本页内容 1.真机测试好处多 2.开始吧!真机测试 1.真机测试好处多 不久前才开我的Android Studio之旅,就遇上了一个大麻烦——创建的模拟器各种运行出错.尝试了各种解决方法,都没有什么结 ...
- parseInt(string, radix)
参数 描述 string 必需.要被解析的字符串. radix 可选.表示要解析的数字的基数.该值介于 2 ~ 36 之间. 如果省略该参数或其值为 0,则数字将以 10 为基础来解析.如果它以 “0 ...
- Git Note - git tag
git tag is used to create labels, usually for version numbers. Format: git tag <TagName> <r ...
- HTML5、CSS3与响应式Web设计入门(1)
HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...
- wp8.1 创建动态磁贴应用
目前Windows Phone 8.1所支持磁贴像素大小有71x71.150x150和310x150,分为大中小三种模式,对于桌面磁贴微软提供的诸多模板http://msdn.microsoft.co ...
- easyui的filebox过滤文件
示例:<input class="easyui-filebox" data-options="buttonText:'选择文件',accept:'image/gif ...
- jQuery outerHeight() 方法
outerHeight() 方法返回第一个匹配元素的外部高度. 如下面的图像所示,该方法包含 padding 和 border. 提示:如需包含 margin,请使用 outerHeight(true ...
- C#DataTable一些使用方法
C#DataTable一些使用方法 1,使用DataTable必须要引用System.Data. 2,定义一个DataTable DataTable dt=new DataTable(); 3,为 ...
- 记开发个人图书收藏清单小程序开发（五）Web开发
决定先开发Web端试试. 新增Web应用: 选择ASP.NET Core Web Application,填写好Name和Location,然后点击OK. 注意红框标出来的,基于.NET Core 2 ...