happy cat image

everdevel

Brand New Day

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

여러개의 체크박스 체크하기

앞에서 체크박스를 제어하는 방법에 대해 알아봤습니다.

이번에는 다수의 체크박스를 체크상태로 만드는 방법에 대해서 알아봅시다.

화면에 있는 모든 체크박스를 체크 상태로 만든다면 태그가 input이고 type속성의 값이 checkbox인 요소만 선택합니다.

여러개의 태그를 컨트롤하므로 반복문을 사용하여 처리합니다.

즉 다음과 같이요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - checkbox</title>
<script>
window.onload = function(){
    for(var i = 0; i < document.getElementsByTagName('input').length; i++){
        if(document.getElementsByTagName('input')[i].getAttribute('type') == 'checkbox'){
            document.getElementsByTagName('input')[i].checked = true;
        }
    }
};
</script>
</head>
<body>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
    <label>haro<input type="checkbox" /></label>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript Checkbox

결과와 같이 여러개의 체크박스를 체크했습니다.

하지만 체크박스는 name속성을 사용하여 사용하죠.

이번엔 name속성으로 분류하여 해보겠습니다.

네임속성만으로 선택자를 사용하려면 다음과 같습니다.

document.getElementsByName(name속성의 값)

그럼 name속성이 다른 여러개의 체크박스를 만들고 버튼을 눌러서 해당 네임속성의 값만 체크되도록 해봅시다.

버튼을 누르므로 클릭이벤트를 사용하고 다수의 체크박스를 체크하므로 for문을 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - checkbox</title>
<script>
window.onload = function(){
    var hobbyAllBtn = document.getElementById('hobbySelectAllBtn');
    var jobAllBtn = document.getElementById('jobSelectAllBtn');

    hobbyAllBtn.addEventListener('click', function(){
        checkedAll('hobby');
    });

    jobAllBtn.addEventListener('click', function(){
        checkedAll('job');
    });

    function checkedAll(checkType){
        for(var i = 0; i < document.getElementsByName(checkType).length; i++){
            document.getElementsByName(checkType)[i].checked = true;
        }
    }
};
</script>
</head>
<body>
    <input type="button" id="hobbySelectAllBtn" value="Select All Hobbies"/>
    <h3>What's your hobby?</h3>
    <label>listening music<input type="checkbox" name="hobby" value="1"/></label>
    <label>watching youtube<input type="checkbox" name="hobby" value="2"/></label>
    <label>watching movie<input type="checkbox" name="hobby" value="3"/></label>
    <label>making doll<input type="checkbox" name="hobby" value="4"/></label>
    <label>cooking<input type="checkbox" name="hobby" value="5"/></label>
    <label>coding<input type="checkbox" name="hobby" value="6"/></label>
    <label>none<input type="checkbox" name="hobby" value="7"/></label>
    <br>
    <br>
    <br>
    <input type="button" id="jobSelectAllBtn" value="Select All Jobs"/>
    <h3>What's your Job?</h3>
    <label>business<input type="checkbox" name="job" value="1"/></label>
    <label>operation<input type="checkbox" name="job" value="2"/></label>
    <label>head hunter<input type="checkbox" name="job" value="3"/></label>
    <label>president<input type="checkbox" name="job" value="4"/></label>
    <label>driver<input type="checkbox" name="job" value="5"/></label>
    <label>programmer<input type="checkbox" name="job" value="6"/></label>
    <label>designer<input type="checkbox" name="job" value="7"/></label>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

JavaScript Checkbox

위의 코드에서 체크를 하는 기능은 동일하므로 checkedAll 함수로 만들어서 무엇을 체크했냐만 값을 받았습니다.

그럼 버튼 하나를 더 만들어서 체크를 해제하는 기능도 만들어보시기 바랍니다.

예제는 아래에 놓겠습니다.
























































<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - checkbox</title>
<script>
window.onload = function(){
    var hobbyAllBtn = document.getElementById('hobbySelectAllBtn');
    var jobAllBtn = document.getElementById('jobSelectAllBtn');

    var unHobbyAllBtn = document.getElementById('hobbyUnSelectAllBtn');
    var unJobAllBtn = document.getElementById('jobUnSelectAllBtn');

    hobbyAllBtn.addEventListener('click', function(){
        checkedAll('hobby', true);
    });

    jobAllBtn.addEventListener('click', function(){
        checkedAll('job', true);
    });

    unHobbyAllBtn.addEventListener('click', function(){
        checkedAll('hobby', false);
    });

    unJobAllBtn.addEventListener('click', function(){
        checkedAll('job', false);
    });

    function checkedAll(checkType, value){
        for(var i = 0; i < document.getElementsByName(checkType).length; i++){
            document.getElementsByName(checkType)[i].checked = value;
        }
    }
};
</script>
</head>
<body>
    <input type="button" id="hobbySelectAllBtn" value="Select All Hobbies"/>
    <input type="button" id="hobbyUnSelectAllBtn" value="Unselect All Hobbies"/>
    <h3>What's your hobby?</h3>
    <label>listening music<input type="checkbox" name="hobby" value="1"/></label>
    <label>watching youtube<input type="checkbox" name="hobby" value="2"/></label>
    <label>watching movie<input type="checkbox" name="hobby" value="3"/></label>
    <label>making doll<input type="checkbox" name="hobby" value="4"/></label>
    <label>cooking<input type="checkbox" name="hobby" value="5"/></label>
    <label>coding<input type="checkbox" name="hobby" value="6"/></label>
    <label>none<input type="checkbox" name="hobby" value="7"/></label>
    <br>
    <br>
    <br>
    <input type="button" id="jobSelectAllBtn" value="Select All Jobs"/>
    <input type="button" id="jobUnSelectAllBtn" value="Unselect All Jobs"/>
    <h3>What's your Job?</h3>
    <label>business<input type="checkbox" name="job" value="1"/></label>
    <label>operation<input type="checkbox" name="job" value="2"/></label>
    <label>head hunter<input type="checkbox" name="job" value="3"/></label>
    <label>president<input type="checkbox" name="job" value="4"/></label>
    <label>driver<input type="checkbox" name="job" value="5"/></label>
    <label>programmer<input type="checkbox" name="job" value="6"/></label>
    <label>designer<input type="checkbox" name="job" value="7"/></label>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

checkedAll함수의 두번째 파라미터로 값을 지정했습니다. 호출할 때는 아규먼트로 true, false를 전달합니다. ^^

점점 복잡해지네요.

봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준