<一>初探js特效魅力之全选不选反选04
初探js特效魅力04
我们在进入到公司里面工作的时候，做一个同一个项目，经常是大家分工合作，当我们写css时，一般不写在行间，因为这样会被误操作，也就是被乱删了都不知道，这样的后果是很难检查的 ，因为一个项目做下来，到最后，代码一大把，看着都头疼，
接下来就是教大家如何提取行间样式并作为函数调用，如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<script>
window.onload=function(){
var oDiv=document.getElementById("btn1");
oDiv.onclick=function(){
alert('a');
}
}
</script>
</head>
</style>
<body>
<input type="button" value="按钮" id="btn1"/>
</body>
</html>
向上面一样，样式和js我们一般不写在标签里面，通常写在head里面，但是大家要记住，js是一行行执行的，像我们这个方法，一定要在前面加上window.onload，意思就是页面加载完执行这个方法，如果没有window.onload,页面就会报错，因为它找不到按钮的id。
利用for循环、getElementsByTagName的方法让复选框全选、反选、不选功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<script>
window.onload=function(){
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var oDiv=document.getElementById("div1");
var ach=oDiv.getElementsByTagName("input");
btn1.onclick=function(){
for(var i=0;i<ach.length;i++){
ach[i].checked=true;
}
}
btn2.onclick=function(){
for(var i=0;i<ach.length;i++){
ach[i].checked=false;
}
}
btn3.onclick=function(){
for(var i=0;i<ach.length;i++){
if(ach[i].checked==true){
ach[i].checked=false;
}
else{
ach[i].checked=true;
}
}
}
}
</script>
</head>
</style>
<body>
<input type="button" value="全选" id="btn1"/><br />
<input type="button" value="不选" id="btn2"/><br />
<input type="button" value="反选" id="btn3"/><br />
<div id="div1">
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
</div>
</body>
</html>
未完待续，请继续查看初探js特效魅力05
<一>初探js特效魅力之全选不选反选04的更多相关文章
- <一>初探js特效魅力之选项卡05
初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- js实现checkbox的全选和全不选功能
html代码: <form name="form1" method="post" action="manage.php?act=sub" ...
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- asp.net中Repeater结合js实现checkbox的全选/全不选
前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...
- 原生JS实现购物车全选多选按钮功能
对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...
- js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...
- JS的魅力
一.初探JavaScript魅力 基本知识: JavaScript是什么 网页特效原理 -JavaScript就是修改样式 编写JS流程 - 布局:HTML + CSS - 属性:确定修改哪些属性 - ...
- js特效 15个小demo
js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...
随机推荐
- 用Ueditor存入数据库带HTML标签的文本，从数据库取出来后，anjular用ng-bind-html处理带HTML标签的文本
ng.module('index-filters', []) .filter('trustHtml', function ($sce) { return function (input) { retu ...
- idea配置tomcat.md
[toc] 1.打开Edit Configurations,可以通过万能搜索快速进入!!! 2.添加服务器,在左上角找到Tomcat并添加 3.配置发布路径,Server标签页中填写完名称和路径,在D ...
- [LeetCode OJ] Single Number之二 ——Given an array of integers, every element appears THREE times except for one. Find that single one.
class Solution { public: int singleNumber(int A[], int n) { ; ; ; i<=bits; i++) { ; ; ; j<n; j ...
- C#DataTable操作
] 在DataSet中添加DataTable DataSet.Tables.Add(DataTable) 实例: DataSet ds=new DataSet(); DataTable table=n ...
- ComboBoxEdit
1. 如何使其不可编辑 TextEditStyle 设置为:DisableTextEditor 2. 如何设置鼠标为手形 Cursor 设置为:Hand
- Unity3d脚本的生命周期
接下来,做出一下讲解:最先执行的方法是Awake,这是生命周期的开始,用于进行激活时的初始化代码,一般可以在这个地方将当前脚本禁用:this.enable=false,如果这样做了,则会直接跳转到On ...
- width:100%缩小窗口时背景图片出现空白bug
页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...
- 小A项目为什么加班
1.负责架构搭建的人搭建完成架构后,没有进行落地性验证:导致真正要用到的时候才发现spring没有配置:需要对架构人员的进度和内容进行跟踪,在跟踪进度的时候需要强调落地性: 2.负责架构搭建的人没有提 ...
- hdu不要62
Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来, ...
- 在zend studio 9.* 中使用phpunit进行单元测试
单元测试在用PHP开发大型项目时必备的减少测试难度和提高测试效率的利器,而PHPUnit是php做单元测试时使用范围最广的一个.如果在window系统中开发,就要调用控制台来运行phpunit,非常的 ...