40-JavaScript-折叠与显示-复选框的简单应用

来源：互联网发布：朱砂痣蚊子血知乎编辑：程序博客网时间：2024/06/07 16:37

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>