<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
/** Shift + 마우스클릭 으로 특정 체크 박스를 위에서 아래로
* 동시에 여러개를 선택 혹은 해제 할 경우 사용. (단, 아래서 위로의 선택 혹은 해제는 안되고 각 체크 박스의 값은 유일한 값이어야 한다.)
* 같은 이름의 체크 박스 객체 배열에서 사용..
* <input type="checkbox" name="체크박스명" onClick="javascript: check_shift();">
* created by anthunt01@edmsoft.com 2005/08/31
**/
var oldCheckValue = ""; // 기존 클릭한 체크 박스의 값을 저장하기 위한 변수 : 시작점을 구분하기 위함
function check_shift() {
var obj = window.event.srcElement; // 클릭한 체크 박스 객체
var oObject = document.getElementsByName(obj.name); // 동일한 이름을 가진 체크 박스 객체 배열
var vCheck = (obj.checked == true) ? true : false; // 선택 혹은 해제 여부
var vBreak = false; // 선택 혹은 해제를 시작/종료 여부
// SHIFT 키가 눌려있는지를 체크
if(event.shiftKey) {
// 체크 박스 객체 갯수만큼 루프
for(var i = 0; i < oObject.length; i++) {
// 기존 클릭한 체크 박스값이 존재하는가를 확인하여
// 값이 없으면 처음부터 적용하고 그렇지 않으면 기존
// 클릭한 체크 박스 부터 지금 클릭한 체크 박스 까지 선택 혹은 해제를 적용한다.
if(oldCheckValue == "") {
if(oObject[i].value == obj.value) break; // 지금 클릭한 체크 박스의 값과 루프의 체크 박스의 값이 같으면 루프를 빠져나간다.
else oObject[i].checked = vCheck; // 값이 다르면 선택/해제를 적용한다.
}else {
// 기존 체크 박스의 값과 같으면 선택/해제 여부를 결정하고
// 적용을 시작한다.
if(oObject[i].value == oldCheckValue) {
vCheck = (oObject[i].checked == true) ? true : false;
vBreak = true;
}
if(vBreak) oObject[i].checked = vCheck; // 적용이 종료 되지 않았으면 적용한다.
if(oObject[i].value == obj.value) break; // 지금 클릭한 체크 박스의 값과 같으면 적용을 종료 한다.
}
}
}else {
oldCheckValue = obj.value; // SHIFT키가 눌리지 않았으면 기존 체크 박스 값을 변경해준다.
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="checkbox" NAME="checkbox" value="1" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="2" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="3" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="4" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="5" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="6" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="7" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="8" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="9" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="10" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="11" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="12" ONCLICK="javascript: check_shift();">
</BODY>
</HTML>
리스트에서 특정 체크 박스들만을 선택하고자 할 때 그 갯수가 많으면 일일이 하나씩 찾아서 체크하기가 굉장히 불편합니다.
그래서 만든 기능인데 윈도우 탐색기나 이런데 보면 SHIFT키 누르고 클릭하면 처음 선택되어
있던 부분 부터 마지막 선택한 부분까지 선택되는 기능을 스크립트로 한번 구현해 봤습니다.
조금은 더 디테일한 기능을 만들 수 있을 것 같은데 우선은 이렇게만 구현해 봤습니당...
만약 필요하신 분이 있다거나 좋다고 생각하시는 분들은 마니 마니 써주세요..
출처 :: PHPSCHOOL
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
/** Shift + 마우스클릭 으로 특정 체크 박스를 위에서 아래로
* 동시에 여러개를 선택 혹은 해제 할 경우 사용. (단, 아래서 위로의 선택 혹은 해제는 안되고 각 체크 박스의 값은 유일한 값이어야 한다.)
* 같은 이름의 체크 박스 객체 배열에서 사용..
* <input type="checkbox" name="체크박스명" onClick="javascript: check_shift();">
* created by anthunt01@edmsoft.com 2005/08/31
**/
var oldCheckValue = ""; // 기존 클릭한 체크 박스의 값을 저장하기 위한 변수 : 시작점을 구분하기 위함
function check_shift() {
var obj = window.event.srcElement; // 클릭한 체크 박스 객체
var oObject = document.getElementsByName(obj.name); // 동일한 이름을 가진 체크 박스 객체 배열
var vCheck = (obj.checked == true) ? true : false; // 선택 혹은 해제 여부
var vBreak = false; // 선택 혹은 해제를 시작/종료 여부
// SHIFT 키가 눌려있는지를 체크
if(event.shiftKey) {
// 체크 박스 객체 갯수만큼 루프
for(var i = 0; i < oObject.length; i++) {
// 기존 클릭한 체크 박스값이 존재하는가를 확인하여
// 값이 없으면 처음부터 적용하고 그렇지 않으면 기존
// 클릭한 체크 박스 부터 지금 클릭한 체크 박스 까지 선택 혹은 해제를 적용한다.
if(oldCheckValue == "") {
if(oObject[i].value == obj.value) break; // 지금 클릭한 체크 박스의 값과 루프의 체크 박스의 값이 같으면 루프를 빠져나간다.
else oObject[i].checked = vCheck; // 값이 다르면 선택/해제를 적용한다.
}else {
// 기존 체크 박스의 값과 같으면 선택/해제 여부를 결정하고
// 적용을 시작한다.
if(oObject[i].value == oldCheckValue) {
vCheck = (oObject[i].checked == true) ? true : false;
vBreak = true;
}
if(vBreak) oObject[i].checked = vCheck; // 적용이 종료 되지 않았으면 적용한다.
if(oObject[i].value == obj.value) break; // 지금 클릭한 체크 박스의 값과 같으면 적용을 종료 한다.
}
}
}else {
oldCheckValue = obj.value; // SHIFT키가 눌리지 않았으면 기존 체크 박스 값을 변경해준다.
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="checkbox" NAME="checkbox" value="1" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="2" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="3" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="4" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="5" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="6" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="7" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="8" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="9" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="10" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="11" ONCLICK="javascript: check_shift();">
<INPUT TYPE="checkbox" NAME="checkbox" value="12" ONCLICK="javascript: check_shift();">
</BODY>
</HTML>
리스트에서 특정 체크 박스들만을 선택하고자 할 때 그 갯수가 많으면 일일이 하나씩 찾아서 체크하기가 굉장히 불편합니다.
그래서 만든 기능인데 윈도우 탐색기나 이런데 보면 SHIFT키 누르고 클릭하면 처음 선택되어
있던 부분 부터 마지막 선택한 부분까지 선택되는 기능을 스크립트로 한번 구현해 봤습니다.
조금은 더 디테일한 기능을 만들 수 있을 것 같은데 우선은 이렇게만 구현해 봤습니당...
만약 필요하신 분이 있다거나 좋다고 생각하시는 분들은 마니 마니 써주세요..
출처 :: PHPSCHOOL
'JavaScript' 카테고리의 다른 글
| window.onload 에 여러개의 함수 추가하기 (0) | 2008.05.10 |
|---|---|
| 체크박스 전체 체크 or 해제 (0) | 2008.04.25 |
| 모달창 사용하기 (0) | 2008.04.25 |
| 다중파일 업로드 폼 만들기 (0) | 2008.04.25 |
| KeyCode List (0) | 2008.04.25 |
댓글