일단 Body에 제어할 checkbox를 놓아두자.
스크립트 제어부분
Body안에는 제어할 체크박스를 위치하고
각각의 기능을 할 버튼을 세게 배치 하였다.
첫번째 버튼은 현재 체크되어 있는 체크박스의 수를 센다.
01번 위치의 스크립트를 보면
#btnCheck ID를 가진 버튼의 Click Event가 발생하면 실행되는 부분이다.
$("input:checkbox:checked").length 는 현재 웹페이지의 checkbox의 check 된 element의 수를 센다.
02번
#("input:checkbox:not(checked).attr("checked","checked") 는 현재 웹페이지에서 체크되지 않은
[ not(checked) ] checkbox에 checked 어트리뷰트를 추가 [ .attr("checked", "checked) ]한다.
반대로 03번은 checked 어트리뷰트에 checked 속성에 공백을 넣어서 checked 속성을 없애버렸다.
jQuery 의 셀렉터에 대해서는 아래를 참조하자
http://docs.jquery.com/Selectors
좋은 하루 되시길...
출처 : http://xwing.tistory.com/entry/jQuery%EB%A1%9C-checkbox-%EC%A0%9C%EC%96%B4
<body>
<form id="form1" runat="server">
<br />
<input type="checkbox" id="check1" value="1" />1
<input type="checkbox" id="check2" value="2" />2
<input type="checkbox" id="check3" value="3" />3
<input type="checkbox" id="check4" value="4" />4
<br />
<input type="button" id="btnCheck" value="_submit" />
<input type="button" id="btnAllCheck" value="all check" />
<input type="button" id="btnUnCheck" value="all uncheck" />
</div>
</form>
</body>
<form id="form1" runat="server">
<br />
<input type="checkbox" id="check1" value="1" />1
<input type="checkbox" id="check2" value="2" />2
<input type="checkbox" id="check3" value="3" />3
<input type="checkbox" id="check4" value="4" />4
<br />
<input type="button" id="btnCheck" value="_submit" />
<input type="button" id="btnAllCheck" value="all check" />
<input type="button" id="btnUnCheck" value="all uncheck" />
</div>
</form>
</body>
스크립트 제어부분
<script type="text/javascript" src="Js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
// ---------- 01 -------------
$("#btnCheck").click(function() {
alert($("input:checkbox:checked").length);
});
//----------- 02 -------------
$("#btnAllCheck").click(function() {
$("input:checkbox:not(checked)").attr("checked", "checked");
});
//------------ 03 ------------
$("#btnUnCheck").click(function() {
$("input:check:checked").attr("checked", "");
});
})
</script>
<script type="text/javascript">
$(function() {
// ---------- 01 -------------
$("#btnCheck").click(function() {
alert($("input:checkbox:checked").length);
});
//----------- 02 -------------
$("#btnAllCheck").click(function() {
$("input:checkbox:not(checked)").attr("checked", "checked");
});
//------------ 03 ------------
$("#btnUnCheck").click(function() {
$("input:check:checked").attr("checked", "");
});
})
</script>
Body안에는 제어할 체크박스를 위치하고
각각의 기능을 할 버튼을 세게 배치 하였다.
첫번째 버튼은 현재 체크되어 있는 체크박스의 수를 센다.
01번 위치의 스크립트를 보면
#btnCheck ID를 가진 버튼의 Click Event가 발생하면 실행되는 부분이다.
$("input:checkbox:checked").length 는 현재 웹페이지의 checkbox의 check 된 element의 수를 센다.
02번
#("input:checkbox:not(checked).attr("checked","checked") 는 현재 웹페이지에서 체크되지 않은
[ not(checked) ] checkbox에 checked 어트리뷰트를 추가 [ .attr("checked", "checked) ]한다.
반대로 03번은 checked 어트리뷰트에 checked 속성에 공백을 넣어서 checked 속성을 없애버렸다.
jQuery 의 셀렉터에 대해서는 아래를 참조하자
http://docs.jquery.com/Selectors
좋은 하루 되시길...
출처 : http://xwing.tistory.com/entry/jQuery%EB%A1%9C-checkbox-%EC%A0%9C%EC%96%B4
'소프트웨어 > JavaScript • Dhtml' 카테고리의 다른 글
| jQuery js-hotkeys 무적의 키 바인딩 (0) | 2009.10.06 |
|---|---|
| jQuery Selector 를 이해해 보자. (1) | 2009.09.11 |
| 자바스크립트 HTML에서 주석문 달지말자! (0) | 2009.08.06 |
| 웹브라우즈별 data URI scheme 테스트 (0) | 2009.08.06 |
| jQuery Selector 를 이해해 보자. (0) | 2009.08.06 |