純JS 實現 點擊 全選/全不選 checkbox 功能

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');
    }
}