本文介绍了一个交互式网页应用，其中包含全选与不全选功能，以及选中某个选项时会自动选择所有模版。通过JavaScript实现全选与不全选按钮，用户可以在选择单个选项的同时，触发全选操作，反之亦然。
1、可以全选与不全选；2、选中某个时也会选择模版选中；再点全选时也全选中所有的，也可以取消选中项
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var bool = false;
var flag = false;
function showchoose(){
var checkboxs = document.getElementsByName("a");
if(flag==false){
for(var i =0; i < checkboxs.length; i++){
checkboxs[i].checked == true ? bool=checkboxs[i].checked = false : bool=checkboxs[i].checked = true;
}
}else{
for(var i =0; i < checkboxs.length; i++){
bool = checkboxs[i].checked = true;
}
flag = false;
}
selectModel(bool);
}
function showone(){
var checkboxs = document.getElementsByName("a");
bool = false;
for(var i=0; i<checkboxs.length; i++) {
if (checkboxs[i].checked == true) {
bool = true ;
flag = true;
}
}
selectModel(bool);
}
function selectModel(){
if (bool) {
document.getElementsByName("b")[0].checked = true ;
} else {
document.getElementsByName("b")[0].checked = false ;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="checkbox" NAME="b" id ="b" onclick="showchoose()">全选/不选</input>
<div>
<INPUT TYPE="checkbox" NAME="a" onclick="showone();">a</input>
<INPUT TYPE="checkbox" NAME="a" onclick="showone();">b</input>
<INPUT TYPE="checkbox" NAME="a" onclick="showone();">c</input>
<INPUT TYPE="checkbox" NAME="a" onclick="showone();">d</input>
<INPUT TYPE="checkbox" NAME="a" onclick="showone();">e</input>
</div>
</BODY>
</HTML>
扫一扫
1889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
