当前位置:首页 > 开发 > Web前端 > 前端 > 正文

checkbox实现全选功能

发表于: 2013-03-25   作者:bijian1013   来源:转载   浏览次数:
摘要: 一.JQuery实现全选功能: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> <body&

一.JQuery实现全选功能:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
</head>
<body>
    <input type="checkbox" name="btn" id="btn"/><label for="btn">全选/全不选</label><br/>
    <input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/>
    <input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/>
    <input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/>
    <input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/>
    <input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/>
    <input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/>
    <a href="javascript:;" id="btn2">反选</a>
</body>
</html>
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var checkboxes = $('input[name=choose]');
    var btn = $('#btn');
    var btn2 = $('#btn2');
    
    btn.click(function(){
        checkboxes.attr('checked',this.checked);
    });
    checkboxes.click(function(){
        var flag = true;
        checkboxes.each(function(){
            if(!this.checked) flag = false;
        });
        btn.attr('checked',flag);
    });
    btn2.click(function(){
        var flag = true;
        checkboxes.each(function(){
            this.checked = !this.checked;
            if(!this.checked) flag = false;
        });
        btn.attr('checked',flag);
    });
});
</script>

 

二.JavaScript实现全选功能:

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
</head>
<body>
    <input type="checkbox" name="btn" id="btn"/><label for="btn">全选</label><br/>
    <input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/>
    <input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/>
    <input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/>
    <input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/>
    <input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/>
    <input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/>
    <a href="javascript:;" id="btn2">反选</a>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn');
    var oBtn2 = document.getElementById('btn2');
    var oInput = document.getElementsByName('choose');
    
    for(var i = 0;i < oInput.length; i++){
        oInput[i].onclick = function(){
            this.checked ? allCheck() : oBtn.checked = false;
        };
    };
    
    //全选
    oBtn.onclick = function(){
        for(var i = 0;i < oInput.length; i++){
            oBtn.checked ? oInput[i].checked = true : oInput[i].checked = false;
        };
    };
    
    //反选
    oBtn2.onclick = function(){
        for(var i = 0;i < oInput.length; i++){
            oInput[i].checked = !oInput[i].checked;
        };
        allCheck();
    };
};

//判断是否全选
function allCheck(){
    var oBtn = document.getElementById('btn');
    var oInput = document.getElementsByName('choose');
    var allCheck = true;
    for(var i = 0;i < oInput.length; i++){
        if(!(oInput[i].checked)) allCheck = false;
    };
    allCheck ? oBtn.checked = true : oBtn.checked = false;
};
</script>

 

checkbox实现全选功能

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如
[原]基于ListView和CheckBox实现多选和全选记录的功能 应用开发中经常会有从数据库中读取数据显示,
[原]基于ListView和CheckBox实现多选和全选记录的功能 应用开发中经常会有从数据库中读取数据显示,
[原]基于ListView和CheckBox实现多选和全选记录的功能 应用开发中经常会有从数据库中读取数据显示,
更新: http://yunzhongxia.iteye.com/blog/1145400 请下载1.1最新版本 先看看效果图 思路如下: 1.
想不到贴个大家可能需要的js脚本出来,这么多人喜欢踩 ~ 在WEB项目中关于全选的checkbox功能肯定会
想不到贴个大家可能需要的js脚本出来,这么多人喜欢踩 ~ 在WEB项目中关于全选的checkbox功能肯定会
提及GridView控件的选择功能,那肯定是和CheckBox控件有着亲密的联系,这是毋庸置疑的。选择功能,
GridView是VS2005中對VS2003的DataGrid的增強替代控件 下面展示一下它的基本常見應用 效果圖如下:
js实现全选功能 在数据列表页面中经常会用到全选或者全部取消功能,如下: 这里实现了一个简单的全选
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号