单击复选框并点击提交按钮 javascript 时切换隐藏/显示

Question

我正在尝试使用复选框和提交按钮来切换隐藏/显示我的简历的一部分。我有两个部分，教育和工作经验。我有设置复选框和提交按钮的代码，但我不确定如何编写之后的代码以使复选框起作用。这就是我所拥有的：

<script>
    function validateCheckbox() {
        var checkbox = document.getElementsByName("c1");
        for (var i=0; i < checkbox.length; i++) {
            if (radios[i].checked) {
                return true;
            }
        }
        function myFunction() {
            var x = document.getElementById("workexperience");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

</script>

我想在 CSS 中通过 id 来切换元素的可见性，并且我希望在页面加载时隐藏信息，这样如果网站访问者点击显示工作经验的复选框，然后点击提交按钮，它将在相关部分显示一个复选框的教育或另一个复选框的工作经验。

Answer 1

HTML

<div id="wrapper">
    <div>
        <input type="radio"  name="resume" value="work-experience">
        <input type="radio" name="resume" value="education">
        <button type="button" id="view-resume">View</button>
    </div>
    <div id="work-experience" class="display-none">Work Experience</div>
    <div id="education" class="display-none">Education</div>
</div>

CSS

<style type="text/css">
    .display-none{
        display: none;
    }
</style>

JAVASCRIPT

<script type="text/javascript">
    document.getElementById('view-resume').addEventListener("click", function(){
        var resume = document.querySelector('input[name = "resume"]:checked').value;
        document.getElementById(resume).style.display = 'block';
        if(resume == 'work-experience'){
             document.getElementById('education').style.display = 'none';
        }else{
             document.getElementById('work-experience').style.display = 'none';
        }
    });
</script>