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 弹出层组件(升级版)

    javascript 弹出层组件(升级版)

    前面文章里写过一个弹出层对话框,但ie6下有bug,根本没有实现position:fixed的效果,当时没有真实ie6环境,测试疏忽,匆匆放到博客上,还让一些读者看到甚至使用,在这里表示万分抱歉啊
    2011-05-05
  • 微信小程序项目实践之九宫格实现及item跳转功能

    微信小程序项目实践之九宫格实现及item跳转功能

    这篇文章主要介绍了微信小程序项目实践之九宫格实现及item跳转功能,需要的朋友可以参考下
    2018-07-07
  • 微信小程序实现页面导航与传参功能详解

    微信小程序实现页面导航与传参功能详解

    这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握微信小程序如何进行传递参数,感兴趣的朋友可以了解一下
    2022-08-08
  • JS+Canvas绘制时钟效果

    JS+Canvas绘制时钟效果

    这篇文章主要为大家详细介绍了基于javascript下使用canvas绘制时钟的具体实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 老生常谈JavaScript 数组方法

    老生常谈JavaScript 数组方法

    本文详细介绍了JavaScript数组方法的分类和具体用法,涵盖了数组的添加/删除、查找/访问、遍历、排序/反转、转换以及一些其他实用方法,每种方法都提供了简要的解释和示例代码,帮助读者更好地理解和应用这些方法,感兴趣的朋友一起看看吧
    2025-03-03
  • 简短几句 通俗解释javascript的闭包

    简短几句 通俗解释javascript的闭包

    什么是闭包呢?闭包就是函数实例执行过程中动态产生一个没有被释放资源的栈区,也是一个预执行的过程。
    2011-01-01
  • JavaScript事件发布/订阅模式原理与用法分析

    JavaScript事件发布/订阅模式原理与用法分析

    这篇文章主要介绍了JavaScript事件发布/订阅模式,结合实例形式简单分析了javascript发布/订阅模式的概念、原理及简单使用方法,需要的朋友可以参考下
    2018-08-08
  • Bootstrap 布局组件(全)

    Bootstrap 布局组件(全)

    这篇文章主要为大家详细介绍了Bootstrap布局组件,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JavaScript实现文件下载的超简单两种方式分享

    JavaScript实现文件下载的超简单两种方式分享

    这篇文章主要为大家详细介绍了JavaScript实现文件下载的超简单两种方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • 使用SyntaxHighlighter实现HTML高亮显示代码的方法

    使用SyntaxHighlighter实现HTML高亮显示代码的方法

    syntaxhighlighter是一个小开源项目,它可以在网页中对各种程序源代码语法进行加亮显示。
    2010-02-02

最新评论