纯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‘);
    }
}
时间: 2024-10-13 09:42:07

纯JS 实现 点击 全选/全不选 checkbox 功能的相关文章

纯js全选、多选

使用纯js来写一个模拟购物车的全选和多选功能. 思路: 1.需要给每一个input设置点击事件 2.全选就是把所有的checkbox设置为true 3.取消一个不全选,就是判断是否全部的checkbox都被选了 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head&

纯js实现checkbox的全选、反选、全不选

分开:a. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="checkbox" id="check_all">全选 <inpu

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择

</pre><pre name="code" class="javascript"><span style="font-size:18px;">//点击全选按钮的事件操作 function selectAll(){ var allcheckBoxs=document.getElementsByName("iTo"); var select=document.getElementsByName

asp.net中Repeater结合js实现checkbox的全选/全不选

前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value="" onclick="javascript:FormSelectAll('form1','cboxi','CheckAll',this);" /> //用于选择是否全选的复选框,用javascript函数"FormSelectAll('form1','

【JS】全选、不选、反选复选框(模板)

今天和大家分享一个全选.不选.反选复选框的例子,这个例子可以当做是一个模板使用,只要把一些数据适当改变以下就OK啦. 这是效果图: 代码如下: HTML部分: <input type="button" value="全选"/ id="btn1"> <input type="button" value="不选"/ id="btn2"> <input type=

JS checkbox 全选 全不选

/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value="<%= Default by yourself %>"/> 以下方法各有优劣,使用时根据情况而定. */ //全选(方法一:each 循环) function checkAll() { $.each($("input[name=cbx]"), fun

js实现CheckBox全选全不选

CheckBox全选全不选的js方法 效果: 页面 :<table style="width: 2350px; table-layout: fixed;" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6" class="data_table"> <tr class="scrollColThe

vue.js实战——购物车练习(包含全选功能)

vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种方式使<input type="checkbox" />中的复选框被选中. 方法一:直接在HTML行间中添加checked属性.   eg:<input type="checkbox" checked /> 方法二:使用javascript使in