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

我们平时在做项目的时候，经常会遇到需要实现实现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有所帮助。

赞 (0)

相关推荐

  • 两种不同的方法实现js对checkbox进行全选和反选

    通过两种不同的方法实现用js来对checkbox进行全选和反选: 方法一: 1:js实现checkbox的 全选 功能: 复制代码 代码如下: function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox") { c

  • javaScript checkbox 全选/反选及批量删除

    前台代码 复制代码 代码如下: <script type="text/javascript"> var a; function CheckAll(){ if(a==1) { for(var i=0;i<window.document.form1.elements.length;i++) { var e = form1.elements[i]; e.checked =false; } a=0; } else { for(var i=0;i<window.docum

  • js操作CheckBoxList实现全选/反选(在客服端完成)

    对于CheckBoxList控件来说,一方面要实现大量数据在服务器端的绑定工作,另一方面往往要求实现全选.反选等功能.虽然可以在服务器端完成这方面的工作,但这样一个简单的工作似乎更应该在客户端完成. 具体方法: 在页面中放入一个CheckBoxList控件,并添加几项,用来分析其产生的HTML代码,这样在使用js进行 动态控制时,将会非常清晰其测试代码如下所示: 复制代码 代码如下: <asp:CheckBoxListID="CheckBoxList1"runat="s

  • Jquery CheckBox全选方法代码附js checkbox全选反选代码

    jquery方法如下: 复制代码 代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • js实现checkbox全选、不选与反选的方法

    本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设

  • 实现checkbox全选、反选、取消JavaScript小脚本异常

    实现checkbox全选、反选、取消JavaScript小脚本异常

    今天在实现checkbox全选,反选,取消JavaScript小脚本的时候,总是出现点击后页面瞬间刷新,选择的checkbox全部取消的问题,debug了半天,才发现原来是<button>标签中少写了一个type属性的原因,郁闷啊,希望自己以后少犯这种特别2的错误,特此记录. 复制代码 代码如下: <!-- 以下为错误写法 --> <button name="checkAll" value="全选" class="checkB

  • javascript checkbox全选和反选的简单实现

    javascript checkbox全选和反选的简单实现 发现这样写checkbox全选和反选最简洁明了. function tempUser(val){ $("input[name='userid']").each(function() { this.checked = val; }); } <input type='checkbox' onclick="tempUser(this.checked)" /> <input type='check

  • jquery、js操作checkbox全选反选

    操作checkbox,全选反选 复制代码 代码如下: //全选 function checkAll() { $('input[name="TheID"]').attr("checked", "checked"); } //反选 function uncheckAll() { $('input[name="TheID"]').each(function() { this.checked = !this.checked; }) }

  • js实现checkbox全选和反选示例

    复选框全选示例 复制代码 代码如下: <input type="checkbox" name="selectall" value=on onclick="selectAll()"> function selectAll(form) { var obj = document.getElementsByName('selectall'); var cks = document.getElementsByTagName("inpu

随机推荐