ASCX 에서 컨트롤 찾는 자바스크립트

<script language="JavaScript">
<!--
    function FindControl( tagName, name)
    {
        var tags = document.getElementsByTagName( tagName )

        for(var i = 0; i < tags.length ; i++)
        {
            if(tags[i].name.indexOf(name) >= 0)
            {
                return document.getElementById( tags[i].id );
            }
        }
        return null;
    }

    
    function showValue()
    {
        var tboxMyBox = FindControl("input", 'tboxMyBox1');
        alert(tboxMyBox.value);
    }
//-->
</script>

<form id="MyForm">
    <input type="text" id="_ctl0_tboxMyBox1" name="ctl0:tboxMyBox1"
     value="방가방가">
    <input type="button" onclick="showValue()" value="클릭">
</form>

 

자료출처 : 데브피아 ASP.NET게시판 김승현(lamb100)님의 글.

----------------------------------------------------------------------------------------------------------

 

위 내용을 기본으로 수정해보았습니다.

 

이 기능은, 쇼핑몰의 상품리스트에서 상품리스트의 타이틀쪽에 있는 체크박스 하나를 클릭하면 모든 상품의 체크가 선택되거나 해제되게 하는 기능입니다.

실제로 대한항공 면세점 쇼핑몰에서도 사용했습니다.

 

DataGrid, DataList, Repeater 사용시 ItemTemplate안에 CheckBox가 포함되어 있을 경우, 목록이 여러개라면 그 목록에 있는 모든 체크박스는  프로그램상에서 같은 ID를 부여하였더라도 실제로 컴파일 되고 나면 ID값이 모두 다르게 바뀌어집니다.

하지만 아래 코드처럼 컴파일된 컨트롤의 ID값에 공통적인 특징이 있습니다.

프로그램상에서 부여한 아이디가 cb_Goods라 하면 이 아이디가 포함되어 있고 앞에 ctl1, ctl2처럼 번호값만 다르다는 거죠..

<input id="BaseLayout_Shop__ctl1_rptContestList__ctl1_cb_Goods" type="checkbox" name="BaseLayout_Shop:_ctl1:rptContestList:_ctl1:cb_Goods" /> 첫번째상품

<br>

<input id="BaseLayout_Shop__ctl1_rptContestList__ctl2_cb_Goods" type="checkbox" name="BaseLayout_Shop:_ctl1:rptContestList:_ctl2:cb_Goods" /> 두번째상품

위에 김승현님의 소스를 보시면 바로 그 특성을 이용하여 해당 컨트롤을 찾아내는 것입니다.

그렇다면 이제 같은 ID를 가지고 있는 체크박스 컨트롤들을 모두 찾아서 원하는 작업을 해볼까요?

 

function FindControl( tagName, name)
{
    var controls = new Array();
    var tags = document.getElementsByTagName( tagName );
    var count = 0;
    for(var i = 0; i < tags.length ; i++)
    {
        if(tags[i].name.indexOf(name) >= 0)
        {
            controls[count] = document.getElementById( tags[i].id );

            count++;
        }
    }
    return controls;
}

 

function ControlsChecked(check, chkName)
{      

    //같은 아이디를 가지고 있는 컨트롤을 모두 찾아 배열로 가져온다.

    var chkboxs = FindControl("input", chkName);  

 

    //check라는 체크박스의 체크여부에 따라 찾은 체크박스 컨트롤들을 선택하거나 해제한다.
    for(var i=0; i<chkboxs .length; i++)
               if(check.checked)
                        chkboxs [i].checked = true;
                else
                        chkboxs [i].checked = false;
       
        return true;
}

사용할때는 아래처럼 사용하세요..

 

<input id="checkFlag" type="checkbox" 

                onclick="return ControlsChecked(this, '_ctl_Id')" />

 

_ctl_Id는 checkFlag를 선택시 모두 선택하고자 하는 체크박스 컨트롤의 아이디로..

aspx나 비하인드코드에서 프로그래밍방식으로 부여한 ID입니다.