js初学—实现checkbox全选功能

布局如下:

<p ><input type="checkbox" id="che1"/>全选</p><div id="div1">
    <input type="checkbox"  /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox"  /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
</div>

javascript如下:

<script type="text/javascript">
    window.onload=function()
    {
        xuanzhe();
    }
    function xuanzhe()//定义函数
    {
        var oChe1=document.getElementById(‘che1‘);//获取che1
        var oDiv1=document.getElementById(‘div1‘).getElementsByTagName(‘input‘);//获取div里面的所有input

                oChe1.onclick=function()//定义che1的鼠标点击事件
                {

                        for(var i=0;i<oDiv1.length;i++)
                        {
                            if(che1.checked==true)
                            {
                                oDiv1[i].checked=true;
                            }
                            else
                            {
                                oDiv1[i].checked=false;
                            }
                        }

                };
    }

</script>

能实现checkbox全选功能!  这种功能在网页是应用很广泛!

时间: 2024-10-25 23:15:34

js初学—实现checkbox全选功能的相关文章

实现前端table中checkbox全选功能,并将选中的数据发送到后端

一.需求 1. 点击这个checkbox按钮,会选中下面所用checkbox,当然在选中的情况下点击,会将下面所有选中的checkbox取消: 2. 当下面使用submit的提交按钮时,会将所有checkbox选中的数据提交给后端: 二.实现 1.实现全选checkbox功能 技术分析:其实这里可以使用js活着jquery两种方式,我暂时使用的是js中的dom实现的,具体代码如下: <!DOCTYPE html> <html> <head> <title>实

关于checkbox全选功能的实现

要进行操作的DOM元素: <input type="checkbox" id="cbAll" value="all">全选 爱好: <input type="checkbox" name="cbHobby" value="song">唱歌 <input type="checkbox" name="cbHobby" va

js 表格上checkbox 全选

<table class="layui-table"> <thead> <tr> <th width="75"> <input type="checkbox" style="margin-right: 2px;" class="allCheck" onclick="checkAll(this)" title="全选"

checkbox全选功能js

$("#CheckAll").click(function() {     var checkFlag = $(this).prop("checked");     $("input:checkbox:enabled").each(function() {         $(this).prop("checked", checkFlag);     }); });

checkbox全选功能

$("#cb_classType_all").change(function () { if ($(this).is(":checked")) { $(".cb_classType").prop("checked", true); } else { $(".cb_classType").prop("checked",false); } }); 通过is(":checked&qu

jquery checkbox 全选 不要用attr要用 prop

最近的项目要用到checkbox全选功能,然而使用 attr时总是出现第二次点击时checkbox不变化.后来搜索后,发现在jquery1.6以后已经不用attr处理布尔值的属性了. 查看文档发现 properties就是浏览器用来记录当前值的东西.正常情况下,properties反映它们相应的attributes(如果存在的话).但这并不是boolean attriubutes的情况.当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean proper

JS全选功能代码优化

最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能来做个简单的demo,使用目前现在的编码方式来重新编码,当然以后会一直用这种方式来编写自己的代码.下面是如下代码: JS所有代码: /** * JS全选 * @class Checkall * @param {Object} cfg * @param {Element|selector} [cfg.container] 限定全选的容器 * @par

js实现全选功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

实现checkbox全选和全不选的功能

html代码 <table id="table"> <thead> <tr> <td><input type="checkbox" id="thtd" name="thtd"/></td> </tr> </thead> <tbody> <tr> <td><input type="c