javascript實(shí)現(xiàn)checkBox的全選，反選與賦值

更新時(shí)間：2015年03月12日 08:50:44 投稿：hebedich

這篇文章主要介紹了javascript實(shí)現(xiàn)checkBox的全選，反選與賦值的方法，以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對應(yīng)的html與js代碼的實(shí)現(xiàn)過程

我們平時(shí)在做項(xiàng)目的時(shí)候，經(jīng)常會(huì)遇到需要實(shí)現(xiàn)實(shí)現(xiàn)checkBox的全選，反選與賦值的情況，網(wǎng)上也有許多的范例，這里給大家分享的是本人常用的方法，推薦給大家。

復(fù)制代碼代碼如下:

//js 數(shù)值是否在數(shù)組中

Array.prototype.in_array = function(e){

　　for(i=0;i<this.length;i++){

　　　　if(this[i] == e)

　　　　　　return true;

　　}

　　return false;

}

//js數(shù)組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);

　　}

}

以上就是本示例的全部代碼了，希望對大家學(xué)習(xí)使用javascript控制checkbox有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript 彈出層組件（升級(jí)版）
前面文章里寫過一個(gè)彈出層對話框，但ie6下有bug，根本沒有實(shí)現(xiàn)position:fixed的效果，當(dāng)時(shí)沒有真實(shí)ie6環(huán)境，測試疏忽，匆匆放到博客上，還讓一些讀者看到甚至使用，在這里表示萬分抱歉啊
2011-05-05
微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能,需要的朋友可以參考下
2018-07-07
微信小程序?qū)崿F(xiàn)頁面導(dǎo)航與傳參功能詳解
這篇文章主要為大家詳細(xì)介紹一下微信小程序?qū)崿F(xiàn)頁面導(dǎo)航的幾種方法以及幫助大家掌握微信小程序如何進(jìn)行傳遞參數(shù)，感興趣的朋友可以了解一下
2022-08-08
JS+Canvas繪制時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了基于javascript下使用canvas繪制時(shí)鐘的具體實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05
老生常談JavaScript 數(shù)組方法
本文詳細(xì)介紹了JavaScript數(shù)組方法的分類和具體用法,涵蓋了數(shù)組的添加/刪除、查找/訪問、遍歷、排序/反轉(zhuǎn)、轉(zhuǎn)換以及一些其他實(shí)用方法,每種方法都提供了簡要的解釋和示例代碼,幫助讀者更好地理解和應(yīng)用這些方法,感興趣的朋友一起看看吧
2025-03-03
簡短幾句通俗解釋javascript的閉包
什么是閉包呢？閉包就是函數(shù)實(shí)例執(zhí)行過程中動(dòng)態(tài)產(chǎn)生一個(gè)沒有被釋放資源的棧區(qū)，也是一個(gè)預(yù)執(zhí)行的過程。
2011-01-01
JavaScript事件發(fā)布/訂閱模式原理與用法分析
這篇文章主要介紹了JavaScript事件發(fā)布/訂閱模式,結(jié)合實(shí)例形式簡單分析了javascript發(fā)布/訂閱模式的概念、原理及簡單使用方法,需要的朋友可以參考下
2018-08-08
Bootstrap 布局組件（全）
這篇文章主要為大家詳細(xì)介紹了Bootstrap布局組件，感興趣的小伙伴們可以參考一下
2016-07-07
JavaScript實(shí)現(xiàn)文件下載的超簡單兩種方式分享
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文件下載的超簡單兩種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12
使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
syntaxhighlighter是一個(gè)小開源項(xiàng)目，它可以在網(wǎng)頁中對各種程序源代碼語法進(jìn)行加亮顯示。
2010-02-02