日期:2014-05-16  浏览次数:20393 次

js全选与反选、收缩与展开

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function checkAll(){
var number = document.getElementsByName("number");
if(selectAll.checked){
for(var i = 0 ; i<number.length;i++){
number[i].checked=true;
}
}else{
for(var i = 0 ; i<number.length;i++){
number[i].checked=false;
}
}
}
function showAll(){
if(show.value=="收 缩"){
show.value="展 开";
showTable.style.display = "none";
}else{
show.value="收 缩";
showTable.style.display = "block";
}
}
</script>
</HEAD>
<BODY>
<TABLE border=1 align="center" width="100%" id="showOperator">
<TR>
<TD><input type="checkbox" id="selectAll" onclick="checkAll();" />全 选</TD>
<TD><input type="button" value="收 缩" id="show" onclick="showAll();"/></TD>
</TR>
</TABLE>
<TABLE border=1 align="center" width="100%" id="showTable">
<TR>
<TD><input type="checkbox" name="number"/></TD>
<TD>1</TD>
</TR>
<TR>
<TD><input type="checkbox" name="number"/></TD>
<TD>2</TD>
</TR>
<TR>
<TD><input type="checkbox" name="number"/></TD>
<TD>3</TD>
</TR>
<TR>
<TD><input type="checkbox" name="number"/></TD>
<TD>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>