[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 사용하기|작성자 주한길