happy cat image

everdevel

coding

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
























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

방문해 주셔서 감사합니다.

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

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

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

화면에 있는 모든 체크박스를 체크 상태로 만든다면 태그가 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>

결과는 바로 아래에서 확인하겠습니다.

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>

결과는 바로 아래에서 확인하겠습니다.

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>

결과는 바로 아래에서 확인하겠습니다.

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

점점 복잡해지네요.


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

학교나 학원에서 배우는 것과는 완전히 다른 분위기, 다른 방식으로 들려주는 수학이야기입니다. 수학을 공부하면서도 괴로워하고 힘들어하는 학생들의 마음을 달래주려는 의도로 쓰여진 책입니다. 학생들이 수학과 친해질 수 있도록 도와주기 위해 이야기를 시작하는 점이 색다릅니다. 그냥 설득하는 것이 아니라 가장 좋은 방법인 다른 사람들의 사례들을 들려줍니다. 수학과 친하게 된 사람들의 경험담들. 누군가 어떤 경험을 했다는 것은 내 자신도 경험 가능한 옵션의 테두리 안으로 들어올 수 있다는 것이니까요. 그 다음은 바로 수학공부하자 하지 않고 게임들을 먼저 소개해줍니다. 바둑알, 화투, 트럼프 카드, 등등 우리 주변에 있는 것들을 이용해 친구, 가족과 쉽게 즐기며 논리력을 키울 수 있는 게임들입니다. 초등학교 때부터의 수학 교과 내용이 어떻게 연결되는지 설명하는데, 각 단원 별 의미와 배경을 알려 줍니다. 중학교 수학과정들을 파트별도 정리하여 전체적인 면을 보여줍니다. 마치 산책이나 갈까 했다 동네 뒷산 올라가서보니 뜻밖에 우리 동네가 이렇게 생겼구나 하는 사실을 깨닫게 되는 느낌입니다. 시험과 성적 올리기 비법 이야기는 전혀 안하면서 수학 공부하라고 부드럽게 둘레길처럼 이야기하는 독특한 책입니다. 수학 이야기책, 수학 교과과정 해설서, 가이드북, 혹은 힐링책처럼도 느껴집니다. 이유도 모른 채 뭘 자꾸 풀이하라고 하는 수학이 지루하고 답답하고 화가 날 때 이 책에 담긴 무척 포괄적인 내용을 알고 있다면, 기억한다면 격렬한 거부감이 누그러들지도 모르겠습니다.

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준