체크박스를 모두 체크상태로 바꾸는 자바스크립트

[danny]

체크박스를 모두 체크해 주는 checkall() 자바스크립트 함수를 홈페이지에 적용했는데
IE에서만 되고 파이어폭스에서는 작동하지 않네요..
무슨 문제일까요? 조언 부탁드립니다.
(form 의 name 은 result 이고, form 내의 여러 checkbox 들의 name 은 seq 로 지정하였습니다.)

Code: Select all

<script>
var blnCheck = false
function CheckAll()
{
    var list_size = result.elements.length;

    if(!blnCheck) {
        for(i=0; i< list_size; i++)
            result.seq(i).checked=true
        blnCheck = true
    } else {
        for(i=0; i< list_size; i++)
            result.seq(i).checked=false
        blnCheck = false
    }
}
</script>

[빛알갱이]

MS IE에서만 시험해 본 이들이 흔히 저지르는 전형적인
실수입니다. form의 이름이 result라면
그것은 'document.result'라고 불러야 합니다. 그냥
'result'라고 부르면 절대 안 됩니다.

firefox에서 javascript console을 열어 보시면
'정의되지 않은 object result'라는 에러가 뜬 것을
볼 수 있습니다.

'document.'만 붙여도 훨씬 많은 웹 사이트에서 firefox를
사용할 수 있을 것입니다.

[danny]

답변 고맙습니다. 말씀하신대로 아래와 같이 document. 을 붙였으나
여전히 파이어폭스에서는 작동을 하지 않네요..

Code: Select all

<script>
var blnCheck = false
function CheckAll()
{
    var list_size = document.result.elements.length;

    if(!blnCheck) {
        for(i=0; i< list_size; i++)
            document.result.seq(i).checked=true
        blnCheck = true
    } else {
        for(i=0; i< list_size; i++)
            document.result.seq(i).checked=false
        blnCheck = false
    }
}
</script>

참고로 버튼모양의 그림파일을 클릭할때 CheckAll() 이 작동하도록 했으며 아래와 같은 형식으로 했습니다.

Code: Select all

<a href="javascript:CheckAll();"><img src="이미지주소"></a>

또다른 문제점이 있을까요?

[파란사오정]

배열은 사각괄호로 인덱싱을 합니다...

틀린예)
document.result.seq(i).checked=true;

맞는예)
document.result.seq.checked=true;

[danny]

답변 고맙습니다.

두분 덕분에 이제 IE와 파이어폭스 둘다 잘 작동하네요.

웹 표준화라는 것이 어려운 일이 아님을 새삼 깨달았습니다.

[별]

Code: Select all

<script>
var blnCheck = false;
function CheckAll()
{
    var list_size = document.result.elements.length;

    if(!blnCheck) {
        for(i=0; i< list_size; i++)
            document.result.seq[i].checked=true;
        blnCheck = true;
    } else {
        for(i=0; i< list_size; i++)
            document.result.seq[i].checked=false;
        blnCheck = false;
    }
}
</script> 
<form name="result" id="result">
<input type="checkbox" name="seq" id="seq"><BR>
<input type="checkbox" name="seq" id="seq"><BR>
<input type="checkbox" name="seq" id="seq"><BR>
<input type="checkbox" name="seq" id="seq"><BR>
<input type="checkbox" name="seq" id="seq"><br>
<a href="javascript:CheckAll();">test</a>
</form>

[tenshi]

Code: Select all

<script language="javascript" type="text/javascript">
function checkAll(els, checkFlag)
{
    checkFlag = checkFlag ? "checked" : false;
    if (els.length > 1) {
        for (var i=0, s=els.length; i<s; i++) {
            els[i].checked = checkFlag;
        }
    }
    else
        els.checked = checkFlag;
}

var seqChecked = false;
</script>

<form name="result">
<input type="checkbox" name="seq[]"><BR>
<input type="checkbox" name="seq[]"><BR>
<input type="checkbox" name="seq[]"><BR>
<input type="checkbox" name="seq[]"><BR>
<input type="checkbox" name="seq[]"><br>
<input type="button" value="check all!"
    onclick="checkAll(this.form.elements['seq[]'], seqChecked = !seqChecked);">
</form>

이런식의 구성을 추천해드립니다! 동일한 name의 elements는
서버사이드 스크립트에서 파라미터 값을 전달받기가 좀 까다로워.. 배열형의 사용 ( seq[] )을 많이 합니다.
근데.. 이거.. 문제는 없는거겠죠?