关于css中树形的开闭以及复选框checkbox如何全选取消的实现

来源：互联网发布：好看的美剧推荐知乎编辑：程序博客网时间：2024/04/30 19:28

1，这种方法就是类似于在一般的网站左边有导航栏，然后有+ -显示或者折叠信息

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

0 0