체크박스를 사용하여 여러 옵션들을 나열하고 그 중에 사용자 취향에 맞는 것들을 선택하여 전송하게 하는 방법을 많이 사용하고 있다.
옵션들이 많을 경우 전체를 선택하거나 해제하고 또는 선택된것들을 반전하는 기능이 필요할 때가 있는데 이는 간단하게 자바스크립트로 해결할 수 있다.
<script language="javascript">
function reverse(f){
var i;
for(i = 0; i < f.length; i++){
if(f[i].type == "checkbox"){ // 체크박스인가?
if(f[i].checked){ f[i].checked = false; } else { f[i].checked = true; }
}
}
}
</script>
<form name="testForm">
<input type="checkbox" onclick="javascript:reverse(document.testForm)">선택반전
<input type="checkbox" name="mychoice[]" value="apple">
<input type="checkbox" name="mychoice[]" value="orange">
<input type="checkbox" name="mychoice[]" value="banana">
<input type="checkbox" name="mychoice[]" value="grape">
</form>
위와 같이 하면 선택 반전이 가능하고 전송시 mychoice[] 값은 배열로 전송된다.
유의할것은 <input type="checkbox" name="mychoice" value="apple"> 과 같이 '[]' 을 사용하지 않을 경우 아래 예와 같이 자바스크립트에서는 배열로 인식이 가능하지만 PHP 로 전송할 경우 mychoice 를 배열로 인식하지 않고 선택의 가장 마지막 값이 전송된다는 것.
따라서 불가피하게 위의 예와 같이 폼 안의 모든 컨트롤을 하나 하나 체크박스인지 확인하면서 체크박스일 경우에만 체크 유무를 확인하는 과정이 추가된다.
<script language="javascript">
function reverse(f){
var i;
for(i = 0; i < f.length; i++){ //체크박스만 검사대상으로 넘어옴
if(f[i].checked){ f[i].checked = false; } else { f[i].checked = true; }
}
}
</script>
<form name="testForm">
<input type="checkbox" onclick="javascript:reverse(document.testForm.mychoice)">선택반전
<input type="checkbox" name="mychoice" value="apple">
<input type="checkbox" name="mychoice" value="orange">
<input type="checkbox" name="mychoice" value="banana">
<input type="checkbox" name="mychoice" value="grape">
</form>
function reverse(f){
var i;
for(i = 0; i < f.length; i++){ //체크박스만 검사대상으로 넘어옴
if(f[i].checked){ f[i].checked = false; } else { f[i].checked = true; }
}
}
</script>
<form name="testForm">
<input type="checkbox" onclick="javascript:reverse(document.testForm.mychoice)">선택반전
<input type="checkbox" name="mychoice" value="apple">
<input type="checkbox" name="mychoice" value="orange">
<input type="checkbox" name="mychoice" value="banana">
<input type="checkbox" name="mychoice" value="grape">
</form>
