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有所帮助。

相关文章

  • 微信小程序轮播图swiper代码详解

    微信小程序轮播图swiper代码详解

    swiper组件是滑块视图容器,主要用来做图片轮播。这篇文章主要给大家介绍了关于微信小程序轮播图swiper代码的相关资料,需要的朋友可以参考下
    2020-12-12
  • ES6关于Promise的用法详解

    ES6关于Promise的用法详解

    本篇文章主要介绍了ES6关于Promise的用法详解,详细的介绍了Promise的三种状态和方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • js简单实现删除记录时的提示效果

    js简单实现删除记录时的提示效果

    删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的
    2013-12-12
  • js获取和设置属性的方法

    js获取和设置属性的方法

    本篇文章主要是对js获取和设置属性的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    今天小编就为大家分享一篇在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现Tab选项卡切换效果

    js实现Tab选项卡切换效果

    这篇文章主要为大家详细介绍了js实现Tab选项卡切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Bootstrap3学习笔记(二)之排版

    Bootstrap3学习笔记(二)之排版

    这篇文章主要介绍了Bootstrap3学习笔记(二)之排版的相关资料,非常具有参考价值,特此分享脚本之家平台,供大家参考
    2016-05-05
  • 非常好用的JsonToString 方法 简单实例

    非常好用的JsonToString 方法 简单实例

    这篇文章介绍了非常好用的JsonToString简单实例,有需要的朋友可以参考一下
    2013-07-07
  • ECMAScript6函数剩余参数(Rest Parameters)

    ECMAScript6函数剩余参数(Rest Parameters)

    这篇文章主要介绍了ECMAScript6函数剩余参数(Rest Parameters)的相关资料,需要的朋友可以参考下
    2015-06-06
  • JS读取cookies信息(记录用户名)

    JS读取cookies信息(记录用户名)

    很多网站、博客把网页生成html静态页面了,以利于搜索引擎的索引排名,减轻服务器负担。静态页面由于其稳定快速更快,给用户及站长带来了方便。但评论后如何记住用户的信息呢
    2012-01-01

最新评论