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

最新推荐文章于 2023-06-16 14:15:57 发布

forwardNow

最新推荐文章于 2023-06-16 14:15:57 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： JavaScript 折叠与显示复选框的简单应用

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/17206319

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

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>

forwardNow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
40-JavaScript-折叠与显示-复选框的简单应用

1. 折叠与显示----------------- -show/hidden AAAAAAAA BBBBBBBB CCCCCCCC -----------------var flag;var content;function $(id) { return document.getElementById(id);}
复制链接

扫一扫

专栏目录