검색결과 리스트
글
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);
}
});
'js API > jquery' 카테고리의 다른 글
radio 버튼 checked (0) | 2015.11.09 |
---|---|
HTML5 data- 와 jQuery (0) | 2015.08.21 |
id 값이 존재 하는지 체크 하기 (0) | 2012.06.18 |
jquery checkbox 체크박스 및 라디오버튼 간단히 체크 상태인지 확인 (0) | 2012.05.04 |
jQuery ajax와 콜백 callbacks 활용하기 (0) | 2012.04.30 |