HTML复选框--checkbox

最新推荐文章于 2024-04-24 14:37:39 发布

LeapMotion1

最新推荐文章于 2024-04-24 14:37:39 发布

阅读量3.5w

点赞数 6

分类专栏： Javascript 文章标签： javascript

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在公司实际开发中，会经常遇到复选框全选、多选、统计选中个数的情况，所以总结研究了一些大神的帖子，汇总学习一下！

1.统计被选中复选框的个数
2.点击复选框，执行对应函数
3.获取复选框的状态
4.全选、取消全选动作

1.利用原生JS代码

1）统计被选中复选框的个数

checkbox要是属于同一组的，在复选框的属性内name=”mm”属性要写一致；这样可以通过下面代码获得同一组复选框

var names = document.getElementsByName("mm");       //根据name获取一组内的所有复选框
var count = 0;
for(var i=0; i<names.length; i++) {
    if(names[i].checked) {    //获取复选框的状态，被选中时，该值为true
        count++;  //统计被选中复选框的个数
}

//以下是一个完整的测试代码
<html>
<head>
<title>测试复选框checkbox</title>    

<script>        
function static_num() 
{            
    document.getElementById("btnOperate").onclick = function () {                
        var arr = new Array();                
        var items = document.getElementsByName("category");                 
        for (i = 0; i < items.length; i++) {                    
            if (items[i].checked) {                        
                arr.push(items[i].value);                    
            }                
        }                 
        alert("选择的个数为：" + arr.length);            
    };        
};    
</script>
</head>

<body>    
    <p><input type="checkbox" name="category" value="今日话题" />今日话题 </p>   
    <p><input type="checkbox" name="category" value="视觉焦点" />视觉焦点</p>
    <p><input type="checkbox" name="category" value="财经" />财经</p>    
    <p><input type="checkbox" name="category" value="汽车" />汽车</p>    
    <p><input type="checkbox" name="category" value="科技" />科技</p>    
    <p><input type="checkbox" name="category" value="房产" />房产</p>    
    <p><input type="checkbox" name="category" value="旅游" />旅游</p>    

    <p><input id="btnOperate" type="button" value="选择" onclick="static_num()" /></p>

</body>
</html>

2).点击复选框，执行对应函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试checked用法</title>
</head>
<body>
    <input type="checkbox" name="category" value="今日话题" id="category"/>今日话题

    <script type="text/javascript">
        window.onload = function(){
            //备注：addEventListener只能和getElementById（）函数绑在一起用，若改为getElementsByName()会报错
            var check_text = document.getElementById('category');

            //addEventListener()方法可以避免在html代码中内嵌 js方法
            check_text.addEventListener("click", function () {
                if(check_text.checked) {
                    alert("您已成功选择" + check_text.value);
                } else {
                    alert("取消选择" + check_text.value);
                }
            });
        };
    </script>
</body>
</html>

3).获取复选框的状态

如上面两个例子所述，可以通过如下代码，获取多选框状态

items.checked  //被选中时值为true,否则为false

4)全选、取消全选动作

下面是一个完整的html测试文件，本例子中，用到了 less.js 来编译css文件，建议还没有接触过less的同学，了解一下less编码，非常简单易学而且高效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试checked用法</title>
    <!--引入 less 样式表-->
    <link rel="stylesheet/less" type="text/css" href="./public/css/less-js-checkbox.less">

    <!-- 引入less样式文件 -->
    <script>less = {env : 'development'}</script>
    <script type="text/javascript" src="./public/js/less.js"></script>
    <script>less.watch();</script>

</head>
<body>
    <!--<input type="checkbox" name="category" value="今日话题" id="category"/>今日话题-->
    <!-- div块，显示整个checkbox表 -->
    <div class="show_box">
        <div class="header_row">
            <label for="fruit"><input type="checkbox" name="fruit" id="fruit" value="水果"/>水果</label>
        </div>
        <div class="list_row">
            <label for="apple"><input type="checkbox" name="fruit-items" id="apple" value="苹果"/>苹果</label>
        </div>
        <div class="list_row">
            <label for="banana"><input type="checkbox" name="fruit-items" id="banana" value="香蕉"/>香蕉</label>
        </div>
        <div class="list_row">
            <label for="strawberry"><input type="checkbox" name="fruit-items" id="strawberry" value="草莓"/>草莓</label>
        </div>
        <div class="list_row">
            <label for="peach"><input type="checkbox" name="fruit-items" id="peach" value="桃子"/>桃子</label>

        </div>
    </div>
    <!-- 全选框、取消全选框 -->
    <!-- checkbox列表 -->

    <script type="text/javascript">
        window.onload = function () {
            //水果全选框
            var fruit = document.getElementById('fruit');
            fruit.addEventListener('click', selectAllItems);
            fruit.addEventListener('click', undoAllItems);

            //子节点全选时，全选按钮勾选
            var fruitItems = document.getElementsByName('fruit-items');
            for(var i=0; i<fruitItems.length; i++) {
                fruitItems[i].addEventListener('click', itemsSelectParent);
            }

            //选择所有items
            function selectAllItems() {
                if( fruit.checked) {
                    var fruitItems = document.getElementsByName('fruit-items');
                    for(var i=0; i<fruitItems.length; i++) {
                        if(!fruitItems[i].checked) {
                            fruitItems[i].checked = true;
                        }
                    }
                }
            }

            //取消全选
            function undoAllItems() {
                if( !fruit.checked) {
                    var fruitItems = document.getElementsByName('fruit-items');
                    for(var i=0; i<fruitItems.length; i++) {
                        if(fruitItems[i].checked) {
                            fruitItems[i].checked = false;
                        }
                    }
                }
            }

            //子节点全选时，全选按钮勾选
            function itemsSelectParent() {
                var fruit = document.getElementById('fruit');
                var fruitItems = document.getElementsByName('fruit-items');
                var childStatus = true;
                for(var i=0; i<fruitItems.length; i++) {
                    childStatus = (childStatus && fruitItems[i].checked);
                }
                if(childStatus) {
                    fruit.checked = true;
                } else {
                    fruit.checked = false;
                }

            }
        };
    </script>
</body>
</html>

下面是less样式表的文件：

@base-font: 16px;
@big-font: 20px;
@border: 1px;
@bg-color: #FFF8E1;
@header-bg-color: #F4565E;
@header-btn-color: #FDE330;
@checked-color: #FEE531;

//div块级显示
.show_box {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  border: @border*2 solid @bg-color;
  background-color: @bg-color;
  font-size: @base-font;
  //首行高亮显示
  .header_row {
    height: 28px;
    padding: 3px 10px;
    position: relative;
    font-size: @big-font;
    background-color: @header-bg-color;

  }
  //checkbox列表行
  .list_row {
    height: 30px;
    padding: 3px 10px;
  }
}

本文转载自
http://www.cnblogs.com/kaituorensheng/p/4529113.html

LeapMotion1

关注

6
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
HTML复选框--checkbox

本文转载自 http://www.cnblogs.com/kaituorensheng/p/4529113.html在公司实际开发中，会经常遇到复选框全选、多选、统计选中个数的情况，所以总结研究了一些大神的帖子，汇总学习一下！1.原生JS代码checkbox要是属于同一组的，在复选框的属性内name=”mm”属性要写一致；var names=document.getElementsByNa
复制链接

扫一扫