cssにおけるツリーの開閉とチェックボックスcheckboxがどのようにすべて選択解除されるかについて
4352 ワード
1、この方法は、一般的なウェブサイトの左側にナビゲーションバーがあり、+-表示または折りたたみ情報があるのと同じです.
2、多くの場合、ウェブサイトのフォームチェックボックスcheckboxまたはその他のコンテンツは、ワンタッチですべて選択またはすべてキャンセルする機能を実現することができます.
<html>
<head>
<title>document -- </title>
<script language="javascript" type="text/javascript">
<!--
function test1_onclick(){
if(test1.innerText=="-"){
myList.style.display="none";
test1.innerText="+";
}else{
myList.style.display="block";
test1.innerText="-";
// body all
// body all body ( id)
//
//document.body.all.test1.innerText="-";
//document.body.all("text1").innerText="-";
//document.body.all.item("text1").innerText="-";
}
}
function test2_onclick(){
if(test2.innerText=="-"){
myNation.style.display="none";
test2.innerText="+";
}else{
myNation.style.display="block";
test2.innerText="-";
// body all
// body all body ( id)
//
//document.body.all.test1.innerText="-";
//document.body.all("text1").innerText="-";
//document.body.all.item("text1").innerText="-";
}
}
//-->
</script>
</head>
<body>
<p style="background-color:pink">
<FONT face=" " background-color="pink">
<span id=test1 style="border-left-color:#ff0099;border-bottom-color:#ff0099;cursor:hand;border-top-style:ridge;border-right-color:#ff0099;border-bottom-style:ridge;" language=javascript onclick="return test1_onclick()">-</span>
myFamily
</FONT>
</p>
<ul id=myList>
<li><font face=" "> </font></li>
<li><font face=" "> </font></li>
<li><font face=" "> </font></li>
</ul>
<p style="background-color:yellow">
<FONT face=" ">
<span id=test2 style="border-left-color:#ff0099;border-bottom-color:#ff0099;cursor:hand;border-top-style:ridge;border-right-color:#ff0099;border-bottom-style:ridge" language=javascript onclick="return test2_onclick()">-</span>
nations
</FONT>
</p>
<ul id=myNation>
<li><font face=" "> </font></li>
<li><font face=" "> </font></li>
<li><font face=" "> </font></li>
</ul>
</body>
</html>2、多くの場合、ウェブサイトのフォームチェックボックスcheckboxまたはその他のコンテンツは、ワンタッチですべて選択またはすべてキャンセルする機能を実現することができます.
<!DOCTYPE html>
<html>
<head>
<title> checkbox</title>
<script type="text/javascript" language="javascript">
function selectCheck(obj){
var fruits=document.getElementsByName("fruit");
if(obj.innerText==" "){
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = true;
}
}else{
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = false;
}
}
}
//
function selectCheck2(){
var fruits=document.getElementsByName("fruit");
if(myselect.checked){
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = true;
}
}else{
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = false;
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10" />
10
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20" />
20
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30" />
30
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40" />
40
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50" />
50
<br>
<a href="#" onclick="selectCheck(this)"> </a>
<a href="#" onclick="selectCheck(this)"> </a><br>
<input type="checkbox" id="myselect" onclick="selectCheck2()"/>
</body>
</html><strong>
</strong>