스크립트로 처리하는 그리드 내의 체크박스 전체 선택/해제 예제입니다.
해당 폼의 전체 엘리먼트를 찾는 과정이므로....
다른 부분에서도 유용하게 적용할 수 있을 것입니다.
function ChAll()
{
if(document.all.cbAllChk.checked)
{
CheckBoxCheck(true)
}
else
{
CheckBoxCheck(false)
}
}
function CheckBoxCheck(boolCH)
{
for(var i=0; i < document.Form1.elements.length; i++)
{
if(document.Form1.elements[i].type=="checkbox")
{
document.Form1.elements[i].checked = boolCH;
}
}
}
또는
// HTML 컨트롤일 경우
function selectCheckBox(param1)
{
for(var i=0; i < document.all.Checkbox_id.length; i++)
{
if (param1 == 0)
document.all.Checkbox_id[i].checked = true;
else
document.all.Checkbox_id[i].checked = false;
}
}
// Server 컨트롤일 경우
function selectChkBox(param1)
{
var _elements = document.form_id.elements;
for (var i = 0; i < _elements.length; i++)
{
if (_elements[i].id.indexOf('Checkbox_id') >= 0)
{
if (param1 == 0)
_elements[i].checked = false;
else
_elements[i].checked = true;
}
}
}
[출처] 스크립트로 처리하는 체크박스 전체 선택 및 해제|작성자 뽀우
/체크박스 전부다 선택하기
function allcheck() {
var checkbox = event.srcElement; // allcheck()란 이벤트 핸들러에게 이벤트를 발생시킨 객체를 checkbox안에 담는다.
if( checkbox.checked ) { // 만약 호출한 inputBox에 checked 면
allBoxCheck(true); // 모든박스 inputBox를 체크한다. allBoxCheck()함수는 아래에 정의
} else {
allBoxCheck(false); //체크가 안 되어 있으면 모두 체크 해제.,//끝!!
}
}
function allBoxCheck(val) { //위의 allcheck()함수에서 사용한다.
var allInput = document.all.tags("INPUT"); //문서의 모든 태그중 "INPUT"이라고 한거를 다 allInput 에 담는다.
for( var i=0 ; i<allInput.length ; i++ ) { //그 담은 길이 만큼 돌아~ 돌~리고~~ 돌리~고~
var input = allInput[i]; //그 각각의 allInput의[i]번째를 input에 담아
if( input.type == "checkbox" ) { //그 input의 type이 checkbox인지를 비교한다
input.checked = val; //checkBox가 맞은면 checked에 val을 대입한다.
} //val은 allcheck()에서 호출시allBoxCheck(true & false)지정!! //
}
}
// 큰제목 전체선택 아래 소제목 전체 선택하기
function childCheck() {
var input = event.srcElement; //현재childCheck()함수를 부른 이벤트를 input 에 담는다.값은alert(event.srcElement); //[object]가 찍힌다.
var checked = input.checked //input박스가 체크되어 있으면 true 아니면 false반환한다.
alert(input.checked); // true or false 가 찍힌다.
var td = input.parentElement; // input의 부모(input을 감싼 태그를 말한다)는 td
var tr = td.parentElement; // td의 부모(위 td 를 감싼 태그를 말한다)는 tr
var index = tr.rowIndex; // 그래서 그 tr의 로우 (몇번째 행인지)를 찾는다.
alert(tr.rowIndex); // 해당 로우가 찍힌다.
if( index < 3 ) return; // 나는 3번째 로우 부터 선택 하므로 3번째 이전의 로우는 리턴
var checkTable = document.all.checkTable; //모든 checkTable을 담는다[]
var targetTable = checkTable[index-3]; //거기서3번째를 찾아 담는다
var targetInput = targetTable.getElementsByTagName("INPUT");//3번째에서"INPUT"을 찾아 담는다.
for( var i=0 ; i<targetInput.length ; i++ ) { //targetInput 배열에 담긴 모든 input을 하나씩 뺀다.
var input = targetInput[i]; //targetInput의[i]번째 input을 input에 담고
if( input.type == "checkbox" ) { //그 input 의 type이 checkbox인지를 비교한다.
input.checked = checked; //input.checked 를 checked로 설정...// 끝!!
}
}
}
childCheck()는 각 소 재목의 테이블 마다 동일한 ID를 입력해야 한다
<table id="checkTable" >
<input type="checkbox" onclick="childCheck()" >
댓글 없음:
댓글 쓰기