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

小鱼儿 2022-09-19 00:23 101阅读 0赞

# 1. 折叠与显示 #

通过 display=none | block 来隐藏和显示

![SouthEast][]

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

# 2. 复选框的简单应用(购物车功能)  #

选中则累加, 取消选中则减去

![SouthEast 1][]

<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. 全选/反选 #

![SouthEast 2][]

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

[SouthEast]: /images/20220828/09e009275a9644a3b6ee04b75f4d251b.png
[SouthEast 1]: /images/20220828/0d20f1d88b764bf8ae1a04c8265f240d.png
[SouthEast 2]: /images/20220828/c90e0dfe374b4ca3891a0ebe2177724e.png