码迷,mamicode.com
首页 > Web开发 > 详细

纯JS 实现 点击 全选/全不选 checkbox 功能

时间:2015-09-11 12:27:50      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

html

<input id="select_direction" type="button" onclick="select_check();" select_direction="f" value="全选/全不选"/>

js

// js 全选复选框按钮
function select_check()
{
    // 获取所有input 集合
    var obj_input = document.getElementsByTagName(‘input‘);
    var obj_input_checked = [];
    var obj_select_check = document.getElementById(‘select_direction‘);
    
    // 获取所有id 含有 checked_ 值得集合
    for(var i=0;i < obj_input.length; i++)
    {
        var res = obj_input[i].id.match(‘checked_‘);
        if(res != null)
        {
            obj_input_checked.push(obj_input[i]);
        }
    }
    
    // 选中所有复选框
    if(obj_select_check.getAttribute(‘select_direction‘) == ‘f‘)
    {
        for(var i=0;i < obj_input_checked.length; i++)
        {
            obj_input_checked[i].checked = true;
        }
        obj_select_check.setAttribute(‘select_direction‘,‘t‘);
    }
    // 取消所有复选框
    else
    {
        for(var i=0;i < obj_input_checked.length; i++)
        {
            obj_input_checked[i].checked = false;
        }
        obj_select_check.setAttribute(‘select_direction‘,‘f‘);
    }
}

 

纯JS 实现 点击 全选/全不选 checkbox 功能

标签:

原文地址:http://www.cnblogs.com/qing-blog/p/4800216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!