티스토리 뷰

웹프로그래밍/js

Prototype JS로 Checkbox들 모두 선택 구현

공허공자 2009. 11. 5. 16:35
?
1
2
3
4
5
6
7
8
9
10
11
<form id="options">
    <input type="text" value="test">
    <input type="checkbox" value="0"> 0
    <input type="checkbox" value="1"> 1
    <input type="checkbox" value="2"> 2
    <input type="checkbox" value="3"> 3
</form>
 
<a id="btnSelectAll" href="javascript:;">Select All</a>
 
<a id="btnDeSelectAll" href="javascript:;">DeSelect All</a>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var checkboxes = [];
 
checkboxes = $$('input[type=checkbox]');
 
var f = $('options');
 
// checkboxes 리턴값은 "[input 0, input 1, input 2, input 3]"
checkboxes = f.getInputs('checkbox');
 
// 전체 선택 버튼 클릭하면
$('btnSelectAll').observe('click', function() {
    checkboxes.each(function(chkbox) { chkbox.checked = 1; });
});
 
// 전체 선택 해제 버튼 클릭하면
$('btnDeSelectAll').observe('click', function() {
    checkboxes.each(function(chkbox) { chkbox.checked = 0; });
});

[출처] http://www.ryboe.com/2008/07/10/select-all-checkboxes-with-prototype-js.html

'웹프로그래밍 > js' 카테고리의 다른 글

Prototype으로 radio 버튼 그룹의 값 받기  (0) 2009.11.05
Stereotabs: Prototype 과 Scriptaculous 로 구현한 탭  (0) 2009.11.05
Scriptaculous SelectBox  (0) 2009.08.25
마우스 오버 스크롤 메뉴  (2) 2009.07.07
모든 자바스크립트 오류를 디버그 콘솔에 던지기  (0) 2009.06.01
공유하기 링크
댓글