JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<p>パンフレットの購読をしますか？
    <input type="checkbox" name="brochure" id="request">
</p>
<div id="enquete">
    <p>簡単なアンケートにお答えください。
        <br>このページを何で知りましたか？</p>
    <input type="checkbox" name="enquete">チラシ・公告
    <input type="checkbox" name="enquete">口コミ
    <input type="checkbox" name="enquete">ウェブ
    <input type="checkbox" name="enquete">ブログ
    <input type="checkbox" name="enquete">検索エンジン
    <input type="checkbox" name="enquete">その他</div>

CSS

#enquete {
    display: none;
    padding: 1em;
    background-color: #dfd;
}

JavaScript

function prepareEnquete() {
    document.getElementById('request').onclick = function() {
        if(document.getElementById('request').checked) {
            document.getElementById('enquete').style.display = 'block';
        } else {
            document.getElementById('enquete').style.display = 'none';
        }
    };
    //initial
    document.getElementById('enquete').style.display = 'none';
}

//ページロード後に関数イニシャライズ 
window.onload = function() {
    prepareEnquete();
}