JavaScript-全选-不选-反选

2018-01-13  本文已影响0人  Wonder茂茂

获取行间事件

     提取事件

         为元素添加事件

          1、事件和其他属性一样,可以用JS添加

          2、window.onload的意义

网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:

一.将脚本代码放在网页的底端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。

二.通过window.onload来执行脚本代码。

第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个良好的选择。window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。

          3、在做网页中我们要遵循:行为(JS)、样式(CSS)、结构(HTML)三者分离。


获取一组元素

getElementsByTagName


循环

if(条件){

语句

}

while(条件){

语句

}

var i=0; //1.初始化

while(i<5) //2.条件{

alert(i); //3.语句

//i=i+1; //4.自增

i++; //4.自增

}

for(初始化;条件;自增){

语句

}

for(var i=0;i<5;i++){

alert(i);

}


全选-不选-反选

checked选择

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>全选-不选-反选<title>

<script>

window.onload=function(){

var oBtn1=document.getElementById('btn1');

var oBtn2=document.getElementById('btn2');

var oBtn3=document.getElementById('btn3');

var oDiv=document.getElementById('div1');

var aCh=oDiv.getElementsByTagName('input');

oBtn1.onclick=function(){

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

aCh[i].checked=true;

}

};

oBtn2.onclick=function(){

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

aCh[i].checked=false;

}

};

oBtn3.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>

<body>

<input id="btn1" type="button" value="全选"/><br>

<input id="btn2" type="button" value="不选"/><br>

<input id="btn3" type="button" value="反选"/><br>

<div id="div1">

<input type="checkbox"/><br>

<input type="chsckbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

<input type="checkbox"/><br>

</div>

</body>

</html>


上一篇下一篇

猜你喜欢

热点阅读