[javascript]check box 선택시 나타나는 div 구현

체크박스 선택시 div 나타나게 하는 자바스크립트 입니다.

<script>
function showDiv() {
    var checkBox = document.getElementById("myCheck");
    var div = document.getElementById("myDiv");
    if (checkBox.checked == true){
        div.style.display = "block";
    } else {
       div.style.display = "none";
    }
}
</script>

<input type="checkbox" id="myCheck" onclick="showDiv()"> 체크박스
<div id="myDiv" style="display:none">체크박스를 선택하면 나타나는 div입니다.</div>

체크박스가 여러개 이고 선택 했을때 특정 div 나타나게

<script>
function showDiv() {
    var checkBox1 = document.getElementById("myCheck1");
    var checkBox2 = document.getElementById("myCheck2");
    var checkBox3 = document.getElementById("myCheck3");
    var div1 = document.getElementById("myDiv1");
    var div2 = document.getElementById("myDiv2");
    var div3 = document.getElementById("myDiv3");
    if (checkBox1.checked == true){
        div1.style.display = "block";
    } else {
       div1.style.display = "none";
    }
    if (checkBox2.checked == true){
        div2.style.display = "block";
    } else {
       div2.style.display = "none";
    }
    if (checkBox3.checked == true){
        div3.style.display = "block";
    } else {
       div3.style.display = "none";
    }
}
</script>

<input type="checkbox" id="myCheck1" onclick="showDiv()"> 체크박스1
<input type="checkbox" id="myCheck2" onclick="showDiv()"> 체크박스2
<input type="checkbox" id="myCheck3" onclick="showDiv()"> 체크박스3
<div id="myDiv1" style="display:none">체크박스1을 선택하면 나타나는 div입니다.</div>
<div id="myDiv2" style="display:none">체크박스2을 선택하면 나타나는 div입니다.</div>
<div id="myDiv3" style="display:none">체크박스3을 선택하면 나타나는 div입니다.</div>

체크박스가 여러개 이고 선택 했을때 특정 div 나타나게 for문을 이용해서 간단하게

<script>
function showDiv() {
    var checkBoxes = document.querySelectorAll('input[type=checkbox]');
    for (var i = 0; i < checkBoxes.length; i++) {
        var checkBox = checkBoxes[i];
        var div = document.getElementById('myDiv' + (i + 1));
        if (checkBox.checked == true){
            div.style.display = "block";
        } else {
           div.style.display = "none";
        }
    }
}
</script>

<input type="checkbox" id="myCheck1" onclick="showDiv()"> 체크박스1
<input type="checkbox" id="myCheck2" onclick="showDiv()"> 체크박스2
<input type="checkbox" id="myCheck3" onclick="showDiv()"> 체크박스3
<div id="myDiv1" style="display:none">체크박스1을 선택하면 나타나는 div입니다.</div>
<div id="myDiv2" style="display:none">체크박스2을 선택하면 나타나는 div입니다.</div>
<div id="myDiv3" style="display:none">체크박스3을 선택하면 나타나는 div입니다.</div>

 

이상입니다~