[jQuery] jQuery Checkbox 와 Div 사용하기

체크박스가 많이 나오는 UI 화면을 만들어야 하는데 JQuery를 이용해보았다.

하면서 막힌것이 두개가 있었는데 하나가 checkbox이고 또 다른 하나가 style바꾸는것이었다.

첫째 특정 div내의 checkbox만 구하기!

내가 만들 구조는 이렇게 되어있다.

<div id="km">

.. checkbox 수두룩~

</div>

<div id="bbs">

.. checkbox 수두룩~

</div>

자 그럼 km안에 있는 checkbox만 어떻게 선택할 수 있을까?

$("input:checked") 이렇게 체크박스된것을 가져올수도 있지만..

문제는 그럼 bbs안에 녀석도 선택이 되는데?

이럴땐 해당 id 이름으로 찾은후 checkbox를 찾는거다

$("#km input:checked") 이렇게 하면 km안의 div 있는 checkbox만 가져올 수 있다.

문제는 동적으로 divid가 가져올 수 있으니.. 실제는 이렇게 처리하였다.

function allCheckboxCheck(id, divid) {

var word;

if ($(id).is(':checked')) {

$(divid + " input:checkbox").attr("checked", "checked");

word = "해제";

} else {

$(divid + " input:checkbox").attr("checked", "");

word = "선택";

}

$("#result").text(word);

}

위에서 attr은 attribute를 뜻하고 checked속성을 checked하거나 아님 없애주는 역할을 한다.

그리고 if ( $( id ).is(':checked')) 말은 말 그대로 checkbox가 checked이냐라는 것을 묻고 있다.

웹을 검색하다 보면 아래와 같은 표를 볼수 있는데 이게 핵심되겠다!!

jQuery가 지원하는 CSS 셀렉터들

셀렉터	설명
*	모든 요소와 일치
E1	E1(태그명)인 모든 요소와 일치
E1.class	E1(태그명) 요소의 클래스가 class와 동일한 요소와 일치
E1.#id	E1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치
E1 E2	E1 요소의 자식인 모든 E2(태그명) 요소와 일치
E1 > E2	E1 요소 바로 아래 자식인 E2 요소와 일치
E1 + E2	E1 요소의 바로 다음에 나오는 형제요소 E2와 일치
E1 ~ E2	E1 요소의 다음에 나오는 모든 형제 E2와 일치
E1[attr]	attr 어트리뷰트를 갖는 E1 요소와 일치
E1[attr=val]	attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치
E1[attr^=val]	attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치
E1[attr$=val]	attr 어트리뷰트의 값이 val 값으로 끝나는 E1 요소와 일치
E1[attr*=val]	attr 어트리뷰트의 값이 val 값을 포함하는 E1 요소와 일치

즉 div 밑에 다른 요소를 체크하는 것이니 E1 E2를 쓰면 되는것~

둘째 style 바꾸기

div를 한번에 다보여주는 것이 아니라 km 보여줄때에는 bbs는 안보여야하고

반대로 bbs가 보여줄때는 km이 안보여줘야 한다고 하면 어떻게 하면 될까?

이때 중요한것이 어떻게 css를 먹이느냐 인데 css 속성을 이용하면된다.

$('#km').css('display','none');

$('#km').css( {display:none, 키:밸류로 중복해서 주루루루~});

실제로는 아래처럼 이용하였다. 참고로 이미지인 img 태그의 경로를 바꾸기 위해선 attribute인 str을 다른녀석으로 바꿔주면 된다

function showDiv( target)

{

if ( target == "km")

{

$('#km').css('display','block');

$('#bbs').css('display','none');

$("#Image1").attr('src','/kms/images/cyberdigm/custom/lgoil/subscribe/Tab_on_01.jpg');

$("#Image2").attr('src','/kms/images/cyberdigm/custom/lgoil/subscribe/Tab_off_02.jpg');

}

else if ( target == "bbs")

{

$('#km').css('display','none');

$('#bbs').css('display','block');

... 중략..

 

음 끝으로 태요의 사이트에서 나온 예제를 좀 변경한 것을로 올려본다.

예나 지금이나 태요은 설명을 참 잘하셔.. ㅎㅎ

혹시 JQuery를 써보실려면 태요 사이트 가셔서 JQuery강좌 한번 보고 하는게 좋겠다

JQuery 재미있던데.. 요녀석 공부 좀 더해봐야겠다.

첨부한 예제 화면.

 

 

[출처] [jQuery] jQuery Checkbox 와 Div 사용하기|작성자 주한길