今天我看了网易云课堂里面的js入门视频,学会了如何做全选、不选和反选按钮。具体如下:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
</style>
<script>
window.onload=function(){
var obut=document.getElementById('but1');
var obut2=document.getElementById('but2');
var obut3=document.getElementById('but3');
var odiv=document.getElementById('div1');
var ofu=odiv.getElementsByTagName('input');
obut.onclick=function(){
for(var i=0;i<ofu.length;i++){
ofu[i].checked=true;
};
};
obut2.onclick=function(){
for(var i=0;i<ofu.length;i++){
ofu[i].checked=false;
};
};
obut3.onclick=function(){
for(var i=0;i<ofu.length;i++){
if(ofu[i].checked==true){
ofu[i].checked=false;
}else
ofu[i].checked=true;
};
};
};
</script>
</head>
<body>
<input id="but1" type="button" value="全选" /><br />
<input id="but2" type="button" value="不选" /><br />
<input id="but3" type="button" value="反选" /><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 />
</div>
</body>
</html>