js全选与反选、收缩与展开-优快云博客

本文介绍了一段HTML脚本，该脚本使用JavaScript实现了表格中复选框的全选与取消全选功能，并提供了显示或隐藏表格的功能。通过简单的按钮点击事件，可以轻松地控制表格的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>