< ( 6 ) 선택,해제 했을 때 이전에 선택한 순서대로 순번 정렬하기 (ex. 카카오톡 사진 선택) >
오늘 만들었던 것은 - 예를 들면 카카오톡에서 친구에게 사진을 보낼 때,
1) 사진을 보내려고하는 순서대로 클릭한다.
2) 클릭을 하면 체크박스에 클릭한 순서대로 순번이 표기되고 그 사진이 선택된다.
1.2.3.4.5 순으로 체크를 하다가
3) 세번째에 체크한 사진을 보내고 싶지 않으면 3번을 다시 클릭하면 3번사진이 클릭해제가 된다.
4) 그 상태에서 체크박스에 표시된 순번은 1.2.(3이 제외되고).3.4 로 다시금 정렬되야 한다.
이것을 만들고자................. ( 정말 생활에서는 생각도못한 간단한 것이었는데 ㅜㅜ 코드짜기 어렵네요.. )
해서 만든!! 스크립트!!!!!!!
하.. 아직도 어디선가 오류가 나올 것 같은데 계속 테스트 해본결과 이 상태에서는 스스로 발견한 오류는 없다 ㅜㅜ
코드가 영 초보지만 만들었다는 것에 ㅜㅜ일단 의미를.........ㅎ ㅏ..하..하...ㅋㅋㅋㅋ
--- 결과 화면 (동그라미를 클릭하세요 - input[type=radio])
---
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<style>
* {margin:0; padding:0;}
.check_wrap{position:relative; float:left; width:40px; height:40px; margin: 5px; border-radius: 50%; border:10px solid #ddd; }
.check_wrap label{display:block; width:100%; height:100%;background:url(http://image.goodpeople.co.kr/goodpeople/web/sns/check_select.png) no-repeat 50% 50% ; border-radius: 50%; }
.check_wrap label input[type=checkbox]{position:absolute; top:0; left:0; display:block; width:100%; height:100%; opacity:0; border-radius: 50%; }
.check_wrap label span{display:block; width:100%; height:100%;background-color:transparent; border-radius: 50%; font-size:11px; color:#fff; font-family: 'Lato'; text-align:center; line-height:17px; text-indent:-9999em; border-radius: 50%;}
.check_wrap label input[type=checkbox]:checked + span{ background-color:#000; text-indent:0;}
</style>
</head>
<body>
<div class="check_wrap">
<label for="chk_fb1">
<input type="checkbox" name="faceSelect" id="chk_fb1" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb2">
<input type="checkbox" name="faceSelect" id="chk_fb2" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb3">
<input type="checkbox" name="faceSelect" id="chk_fb3" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb4">
<input type="checkbox" name="faceSelect" id="chk_fb4" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb5">
<input type="checkbox" name="faceSelect" id="chk_fb5" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb6">
<input type="checkbox" name="faceSelect" id="chk_fb6" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb7">
<input type="checkbox" name="faceSelect" id="chk_fb7" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb8">
<input type="checkbox" name="faceSelect" id="chk_fb8" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb9">
<input type="checkbox" name="faceSelect" id="chk_fb9" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<div class="check_wrap">
<label for="chk_fb10">
<input type="checkbox" name="faceSelect" id="chk_fb10" class="ip_check">
<span class="select_num"></span>
</label>
</div>
<script>
$(document).ready(function () {
$('body').on('click', ".check_wrap", function(){
var $this = $(this);
countChecked($this);
});
var totalCount = 0;
var maxCount = 5;
var selectArray = [];
function countChecked( $this ) {
var $thisChk = $this ;
var $ipCheck = $thisChk.find('input[type=checkbox]');
var thisChecked = $ipCheck.prop("checked");
var $countTextbox = $thisChk.find('.select_num');
var $countText = parseInt($thisChk.find('.select_num').text());
if( $ipCheck.hasClass('checked') ){
$ipCheck.removeClass('checked');
$thisChk.removeClass('on');
$ipCheck.prop("checked", false);
totalCount --;
if(totalCount < 0 ){
totalCount = 0;
}
$countTextbox.text('');
selectArray.splice($countText - 1,1);;
var i;
var j;
for( i=0; i<totalCount; i++ ){
j = i +1;
selectArray[i].find('.select_num').text(j);
}
}else{
totalCount ++;
if (totalCount > maxCount) {
alert ("최대 5개 까지만 가능합니다.");
$thisChk.removeClass('on');
$ipCheck.prop("checked", false);
totalCount = maxCount;
return;
}
$ipCheck.addClass('checked');
$thisChk.addClass('on');
$ipCheck.prop("checked", true);
$countTextbox.text(totalCount);
selectArray.push( $thisChk );
}
}
});
</script>
</body>
</html>
'CODING TIP > JavaScript' 카테고리의 다른 글
| (8) 화살표 슬라이드 (0) | 2018.03.26 |
|---|---|
| (7) 쿠키 설정하기 ( 오늘하루 열지않기, 다시보지않기 ) (0) | 2018.03.19 |
| (5) 특정 글자수 만큼만 입력하기 - 글자수 제한 (0) | 2018.03.05 |
| (4) window postmessage - iframe 과 부모의 통신 (0) | 2018.02.19 |
| (3) 검색어 입력하고 검색어를 다른 페이지 파라미터로 넘기기 (0) | 2018.01.26 |