자바스크립트 체크박스 전체선택/해제의 관련 함수.

자바스크립트로 체크박스를 전체선택/해제 할때
체크박스 하나로 전체선택/해제를 하는 버전과
사용자가 임의로 전체선택을 하고 하지 않을때 전체선택/해제 버튼을 선택/해제 하는 함수를 적어봅니다.

아래와 같이 작성해 주시구욤.

<script type="text/javascript">
function allCheckNCancel()
{
var checkBoxAll = document.getElementById("allCheck");
var allCheckBox = document.form.LID;
if(checkBoxAll == null || checkBoxAll == undefined || allCheckBox == null || allCheckBox == undefined)
return;

for(var i = 0; i < allCheckBox.length; i++) 
{       
if(checkBoxAll.checked)
allCheckBox[i].checked = true;
else
allCheckBox[i].checked = false;
}
}

function checkNCancelAllCheckBox()
{
var checkBoxAll = document.getElementById("allCheck");
var allCheckBox = document.form.LID;
if(checkBoxAll == null || checkBoxAll == undefined || allCheckBox == null || allCheckBox == undefined)
return;

var bCheck = true;
for(var i = 0; i < allCheckBox.length; i++) 
{       
if(!allCheckBox[i].checked)
bCheck = false;
}

if(!checkBoxAll.checked && bCheck)
checkBoxAll.checked = true;
else 
checkBoxAll.checked = false;
}
</javascript>

HTML 안에는 아래와 같이 전체선택을 위한 체크박스 하나와
리스트마다의 체크박스가 있는 경우로 작성된다면
위에 작성된 스크립트는 효과적으로 적용될 것입니당. ^^

<form>
<input type="checkbox" id="allCheck">
<input type="checkbox" name="LID">
<input type="checkbox" name="LID">
<input type="checkbox" name="LID">
<input type="checkbox" name="LID">
</form>

그럼 오늘은 여기서 이만.

라벨: , ,