当前位置:  编程技术>jquery

checkbox全选功能(jquery、javascript)

    来源: 互联网  发布时间:2014-09-03

    本文导语:  本节内容: checkbox全选 例1,JQuery实现checkbox全选。   代码示例:                 checkbox全选-www.          全选/全不选      选项1      选项2      选项3      选项4      选项5      选项6   ...

本节内容:
checkbox全选

例1,JQuery实现checkbox全选。
 

代码示例:
 
 
 
     
    checkbox全选-www. 
 
 
    全选/全不选
 
    选项1
 
    选项2
 
    选项3
 
    选项4
 
    选项5
 
    选项6
 
    反选 
 
 
 
 
$(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); 
    });  // www.
    btn2.click(function(){ 
        var flag = true; 
        checkboxes.each(function(){ 
            this.checked = !this.checked; 
            if(!this.checked) flag = false; 
        }); 
        btn.attr('checked',flag); 
    }); 
}); 
  
 

例2,JavaScript实现checkbxo全选功能。
 

代码示例:
 
 
 
     
    checkbox全选-www. 
 
 
    全选
 
    选项1
 
    选项2
 
    选项3
 
    选项4
 
    选项5
 
    选项6
 
    反选 
 
 
 
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(){  //www.
            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; 
}; 
 

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间java.awt类checkbox.accessibleawtcheckbox的类成员方法: checkbox.accessibleawtcheckbox定义及介绍
  • 让checkbox不选中即将选中的checkbox不选中
  • java命名空间java.awt类checkbox的类成员方法: checkbox定义及介绍
  • DevExpress实现GridControl同步列头checkbox与列中checkbox状态
  • Html checkbox标签如何设置默认选中以及用js操作checkbox代码示例
  • jQuery checkbox
  • java命名空间java.awt类checkbox的类成员方法: getaccessiblecontext定义及介绍
  • 请问如何处理checkbox啊?
  • java命名空间java.awt类checkbox的类成员方法: paramstring定义及介绍
  • jquery遍历checkbox简单示例
  • java命名空间java.awt类checkbox的类成员方法: getlabel定义及介绍
  • jquery遍历checkbox介绍
  • java命名空间java.awt类checkbox的类成员方法: getcheckboxgroup定义及介绍
  • JQuery checkbox全选的小例子
  • java命名空间java.awt类checkbox的类成员方法: getselectedobjects定义及介绍
  • jquery遍历checkbox代码与说明
  • java命名空间java.awt类checkbox的类成员方法: setlabel定义及介绍
  • 建在表中的checkbox怎样判断它是否被选中
  • java命名空间java.awt类checkbox.accessibleawtcheckbox的类成员方法: getaccessibleactioncount定义及介绍
  • jquery动态获取复选框checkbox选中个数
  • java命名空间java.awt类checkbox的类成员方法: getstate定义及介绍
  • php获取checkbox值


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3