checkbox 전체 선택 및 해제 또는 클릭이벤트에 따른 해제(undersocrjs)

체크박스 사용 예제

1. 전체 선택/해제

2. 개별 선택/해제 

※ 배열 관련 자바스크립트는 underscorejs 를 사용(_.isArray, _.compact) 합니다.

# HTML /==============================

# -----------------------------------

<div> 

<input type="checkbox" id="chkall">전체선택

</div>

<ul id="user_list">

<li><input type="checkbox" name="chkid" value="4"><a>A</a></li>

<li><input type="checkbox" name="chkid" value="8"><a>B</a></li>

<li><input type="checkbox" name="chkid" value="5"><a>C</a></li>

<li><input type="checkbox" name="chkid" value="2"><a>D</a></li>

</ul>

# JAVASCRIPT /==========================

1. 전체 선택 / 해제

#--------------------------

var share_people = new Array(); 

function find_index(user_id){

var _index = -1;

var is_share_people = (_.isArray(share_people) && share_people.length>0) ? true : false;

if( !is_share_people){

return _index;

}

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

var chkid=share_people[i];

if(chkid == user_id){

_index = i;

break;

}

}

return _index;

}

$('#chkall').on('click',function()

{

if( $(this).is(':checked') ){ //전체선택

$('input[name="chkid"]').each(function() {

var chkbox_val = $(this).val();

if(find_index(chkbox_val) == -1){

share_people.push(chkbox_val);

}

});

$("input[name=chkid]:checkbox").prop("checked", true);

}else{ // 전체해제

$("input[name=chkid]:checkbox").prop("checked", false);

share_people = new Array();

}

});

2. 개별 선택 및 해제

# -------------------------

$('input[name=chkid]:checkbox').on('click',function()

{

var chkbox_val = $(this).val();

var sp_index = find_index(chkbox_val) ;

if( $(this).is(':checked') ){

if(sp_index == -1){share_people.push(chkbox_val); }

}else{

if(sp_index != -1){share_people[sp_index]=false; }

share_people = _.compact(share_people);

}

});