40-JavaScript-折叠与显示-复选框的简单应用
1. 折叠与显示
通过 display=none | block 来隐藏和显示
<body>
-----------------
<div id="title">
<span id="flag">-</span>show/hidden
</div>
<ul id="content">
<li>AAAAAAAA</li>
<li>BBBBBBBB</li>
<li>CCCCCCCC</li>
</ul>
-----------------
</body>
<script type="text/javascript">
var flag;
var content;
function $(id) {
return document.getElementById(id);
}
window.onload = function() {
flag = $("flag");
content = $("content");
flag.onclick = function() {
if ( "+" == flag.innerHTML ) {
content.style.display = "block";
flag.innerHTML = "-";
return;
}
content.style.display = "none";
flag.innerHTML = "+";
}
}
</script>
<style type="text/css">
#flag {
border: 1px solid red;
cursor: pointer;
}
#content {
background-color: gray;
width: 100px;
}
</style>
2. 复选框的简单应用(购物车功能)
选中则累加, 取消选中则减去
<html>
<head>
<script type="text/javascript">
var fruits;
var total;
window.onload = function() {
fruits = document.getElementsByName("fruits");
total = document.getElementById("total");
for (var i = 0; i < fruits.length; i++) {
fruits[i].onclick = function() {
// if ( this.checked )
if (true == this.checked ) {
total.innerHTML = parseInt( total.innerHTML ) + parseInt( this.value );
return;
}
total.innerHTML = parseInt( total.innerHTML ) - parseInt( this.value );
}
};
}
</script>
</head>
<body>
<input type="checkbox" name="fruits" value="10"/> apple --- 10 <br/>
<input type="checkbox" name="fruits" value="20"/> orange -- 20 <br/>
<input type="checkbox" name="fruits" value="30"/> banana -- 30 <br/>
<input type="checkbox" name="fruits" value="40"/> lemon --- 40 <br/>
<input type="checkbox" name="fruits" value="50"/> grape --- 50 <br/>
total:<span id="total">0</span>
</body>
</html>
3. 全选/反选
<html>
<head>
<script type="text/javascript">
var items;
var all;
var reverse;
window.onload = function() {
items = document.getElementsByName("items");
all = document.getElementById("all");
reverse = document.getElementById("reverse");
all.onclick = function() {
var isSelected = false;
if (this.checked) {
isSelected = true;
}
for (var i = 0; i < items.length; i++) {
items[i].checked = isSelected;
};
}
reverse.onclick = function() {
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
};
}
}
</script>
</head>
<body>
<input type="checkbox" name="items" /> 11111 <br/>
<input type="checkbox" name="items" /> 22222 <br/>
<input type="checkbox" name="items" /> 33333 <br/>
<input type="checkbox" name="items" /> 44444 <br/>
<input type="checkbox" name="items" /> 55555 <br/>
<input type="checkbox" id="all" /> all
<input type="checkbox" id="reverse" /> reverse
</body>
</html>