체크박스 상위 노드 찾기(1)

<div class="treebx" value="aaa">
    <c:forEach var="att" items="${att_fld_list }">
        <c:if test="${att.g2_TYPE == '6'}">             
            <div class="TreePd" value="bbb">            
                <div class="Tree_Tx1" id="att${att.g2_ORDER }" value="ccc">
                    <span>
                        <input type="checkbox" name="chk_tree" disabled="disabled" value="${att.g2_ID }"/>${att.g2_NAME }
                    </span>
                </div>
                <c:forEach var="a" items="${att_fld_list }">
                    <c:if test="${a.g2_BASEID == att.g2_ID }">
                        <div class="Tree_sTx" value="ddd">
                            <span>
                                <input type="checkbox" name="chk_tree" value="${a.g2_ID }"/>${a.g2_NAME }
                            </span>
                        </div>
                    </c:if>
                </c:forEach>
            </div>
        </c:if>
    </c:forEach>
</div>

위 소스 구조를 그림으로 나타내면 다음과 같다.

JSTL 을 이용하여 DB에서 조회된 값으로 체크박스 트리를 만들었다.

Jquery 로 체크박스를 제어하기 위해 상위 노드들을 찾는다.

$("input[name='chk_tree']").click(function(){

- this.value , $(this).val() : 선택한 Tree_sTx 의 체크박스 value 값

- this.checked , $(this).is(":checked") : 선택한 체크박스의 체크 여부

- $(this).parents(".treebx").attr('value') : treebx 의 value 값

- $(this).parents(".Tree_sTx").prevAll(".Tree_Tx1").attr('value') : Tree_Tx1 의 value 값​

                                               (Tree_Tx1 과 Tree_sTx 는 형제노드기 때문에 prevAll 사용)

- $(this).parents(".Tree_sTx").attr('value') : Tree_sTx 의 value 값

- TreePd value 값을 찾는 여러 방법

$(this).parents(".Tree_sTx").prevAll(".Tree_Tx1").parents(".TreePd").attr('value')

$(this).parents(".Tree_sTx").parents(".TreePd").attr('value')

$(this).parents(".TreePd").attr('value')