javascript实现checkBox的全选,反选与赋值

 更新时间:2015年03月12日 08:50:44   投稿:hebedich  
这篇文章主要介绍了javascript实现checkBox的全选,反选与赋值的方法,以实例形式详细分析了实现的思路及对应的html与js代码的实现过程

我们平时在做项目的时候,经常会遇到需要实现实现checkBox的全选,反选与赋值的情况,网上也有许多的范例,这里给大家分享的是本人常用的方法,推荐给大家。

复制代码 代码如下:

//js 数值是否在数组中
Array.prototype.in_array = function(e){
  for(i=0;i<this.length;i++){
    if(this[i] == e)
      return true;
  }
  return false;
}
//js数组index
Array.prototype.find_str=function(string){
  var str = this.join("");
  return str.indexOf(string);
}
var houseIds=new Array();
$("#chebox-list-all").click(function(){
  if($("#chebox-list-all").attr("checked")){
    $("[name='checkboxes']").attr("checked",'true');//全选 增加id
    var ids = document.getElementsByName('checkboxes');
    var value = new Array();
    for(var i = 0; i < ids.length; i++){
      if(ids[i].checked)
      houseIds.push(ids[i].value);
    }
  alert(houseIds);
  }else{
    $("[name='checkboxes']").removeAttr("checked");//反选 删除Ids
    houseIds=[];
    alert(houseIds);
  }
})
//单选增加id
function check(obj){
  if(!houseIds.in_array(obj.value)){
    houseIds.push(obj.value);
    alert(houseIds);
  }else{
    var index=houseIds.find_str(obj.value);
    houseIds.splice(index, 1)
    alert(houseIds);
  }
}

以上就是本示例的全部代码了,希望对大家学习使用javascript控制checkbox有所帮助。

相关文章

  • Javascript封装id、class与元素选择器方法示例

    Javascript封装id、class与元素选择器方法示例

    这篇文章主要给大家介绍了Javascript封装id、class与元素选择器的方法,文中给出了详细的示例代码,对大家的理解和学习具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • Bootstrap实现各种进度条样式详解

    Bootstrap实现各种进度条样式详解

    本篇文章主要介绍了Bootstrap实现各种进度条样式详解 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS弹出窗口插件zDialog简单用法示例

    JS弹出窗口插件zDialog简单用法示例

    这篇文章主要介绍了JS弹出窗口插件zDialog简单用法,结合简单实例形式分析了zDialog插件弹出窗口的基本使用方法与参数含义,需要的朋友可以参考下
    2016-06-06
  • js实现二代身份证号码验证详解

    js实现二代身份证号码验证详解

    本文给大家分享一段超级全面的二代身份证号码验证程序,由JS编写而成,可以校验身份证的地址码、出生日期码、顺序码和数字校验码。是身份证去伪存真的一大利器。
    2014-11-11
  • 详解webpack进阶之插件篇

    详解webpack进阶之插件篇

    这篇文章主要介绍了详解webpack进阶之插件篇,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 常用DOM整理

    常用DOM整理

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”。
    2015-06-06
  • js实时获取系统当前时间实例代码

    js实时获取系统当前时间实例代码

    在网页中实时的显示时间,不但可以给网页添色,还可以方便浏览者掌握当前时间,为了提高网站的开发速度,可以把主代码封装在一个单独的函数里面,在需要的时候直接调用 而我为了演示,直接写在了主页面,方便大家观看
    2013-06-06
  • 浅析TypeScript中的类型检查与错误捕获

    浅析TypeScript中的类型检查与错误捕获

    类型检查是一种静态分析的过程,用于验证变量、函数和表达式的类型是否符合预期,这篇文章主要来和大家聊聊TypeScript中类型检查与错误捕获的相关知识,希望对大家有所帮助
    2023-06-06
  • js实现HashTable(哈希表)的实例分析

    js实现HashTable(哈希表)的实例分析

    本文详细介绍javascript哈希表的实例分析及用法。下面就跟小编一起来学习下吧
    2016-11-11
  • javascript函数的call、apply和bind的原理及作用详解

    javascript函数的call、apply和bind的原理及作用详解

    javascript函数的call、apply和bind 本质是用来实现继承的,专业点说法就是改变函数体内部this的指向,当一个对象没有某个功能时,就可以用这3个来从有相关功能的对象里借用过来,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-05-05

最新评论