快捷導航

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

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

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

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

//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);

　　}

}

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

您可能感興趣的文章:

相關(guān)文章

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