Javascript Checkbox Display Error

I am using javascript to check if a checkbox is ticked or not. There are 3 checkboxes and only one can be selected at a time. I am using the following code which works fine, when I uncheck a box and check another the div displays correctly but if I select one then select another e.g have selected checkbox1 and select checkbox2 the "testing" div still appears and the "video" div does not appear. I am guessing this is just something really simple but I can't work it out

<script>
function checkFunction() {

    var checkBox = document.getElementById("myCheck1");
    var text = document.getElementById("testing");

     var checkBox2 = document.getElementById("myCheck2");
    var text2 = document.getElementById("video");
     var checkBox3 = document.getElementById("myCheck3");
    var text3 = document.getElementById("html");
    if (checkBox.checked == true){
        text.style.display = "block";
        text2.style.display = "none";
        text3.style.display = "none";
    }  else {
        text.style.display = "none";
        if (checkBox2.checked == true){
            text2.style.display = "block";
            text.style.display = "none";
            text3.style.display = "none";
            }  else {
            text2.style.display = "none";
            if (checkBox3.checked == true){
                text3.style.display = "block";
                text2.style.display = "none";
                text.style.display = "none";
            }  else {
                text3.style.display = "none";
                text.style.display = "none";
                text2.style.display = "none";
            }
        }
    }
}
</script> 
</script> 
    <script type="text/javascript">
    $('.check').on('change', function() {
        $('.check').not(this).prop('checked', false)
    });
  </script>