DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> javascript實現checkBox的全選,反選與賦值
javascript實現checkBox的全選,反選與賦值
編輯:JavaScript綜合知識     

 這篇文章主要介紹了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有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved