Javascript复选框显示错误

我正在使用javascript检查复选框是否勾选。有3个复选框，一次只能选择一个。我正在使用以下代码，该代码工作正常，当我取消选中一个复选框并选中另一个复选框时，div显示正确，但如果我选择一个，然后选择另一个，例如已选择复选框1并选择复选框2，则“测试”div仍会出现，而“视频”div不会出现。我猜这只是一件非常简单的事情，但我无法解决它

HTML

类型
图像：视频：HTML（当前未使用）：

Javascript

 <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>

函数checkFunction（）{
var checkBox=document.getElementById（“myCheck1”）；
var text=document.getElementById（“测试”）；
var checkBox2=document.getElementById（“myCheck2”）；
var text2=document.getElementById（“视频”）；
var checkBox3=document.getElementById（“myCheck3”）；
var text3=document.getElementById（“html”）；
如果（checkBox.checked==true）{
text.style.display=“块”；
text2.style.display=“无”；
text3.style.display=“无”；
}否则{
text.style.display=“无”；
if（checkBox2.checked==true）{
text2.style.display=“块”；
text.style.display=“无”；
text3.style.display=“无”；
}否则{
text2.style.display=“无”；
if（checkBox3.checked==true）{
text3.style.display=“块”；
text2.style.display=“无”；
text.style.display=“无”；
}否则{
text3.style.display=“无”；
text.style.display=“无”；
text2.style.display=“无”；
}
}
}
}
$（'.check'）。在（'change'，function（）上{
$（'.check'）.not（this）.prop（'checked'，false）
});

当一些人回答您时，您一定要尝试使用一些单选按钮，而不是复选框，以完全避免需要额外的代码来控制基本功能

当一些人回答您时，您肯定应该尝试使用一些单选按钮，而不是复选框，以完全避免需要额外的代码来控制基本功能

看看这个

$（文档）.ready（函数（）{
$（'input.check'）。在（'change'，function（）上{
如果（$（'input.check'）。是（'：checked'））
{
$（'input.check'）.not（this）.prop（'checked'，false）；
$（'input.check'）.not（this）.parent（'div'）.css（'display'，'none'）；
}
否则{
$（'input.check'）.parent（'div'）.css（'display'，''）
}
})
})
类型
图像：视频：HTML（当前未使用）：

看看这个

$（文档）.ready（函数（）{
$（'input.check'）。在（'change'，function（）上{
如果（$（'input.check'）。是（'：checked'））
{
$（'input.check'）.not（this）.prop（'checked'，false）；
$（'input.check'）.not（this）.parent（'div'）.css（'display'，'none'）；
}
否则{
$（'input.check'）.parent（'div'）.css（'display'，''）
}
})
})
类型
图像：视频：HTML（当前未使用）：

找到了一种简单的方法来解决这个问题，其他示例有时不起作用，您必须单击两次，这非常有效

 <script type="text/javascript">
    $('.check').on('change', function() {
        var text = document.getElementById("testing");
        var text2 = document.getElementById("video");
        $('.check').not(this).prop('checked', false)
        var res = $(this).val();
        console.log("res is: " + res);
              if (res == '1') {
                  text.style.display = "block";
                  text2.style.display = "none";
              }
              else {

                  text.style.display = "none";
                  text2.style.display = "block";
              }
    });
  </script>

$（'.check'）。在（'change'，function（）上{
var text=document.getElementById（“测试”）；
var text2=document.getElementById（“视频”）；
$（'.check'）.not（this）.prop（'checked'，false）
var res=$（this.val（）；
console.log（“res是：“+res”）；
如果（res='1'）{
text.style.display=“块”；
text2.style.display=“无”；
}
否则{
text.style.display=“无”；
text2.style.display=“块”；
}
});

找到了一种简单的方法来解决这个问题，其他示例有时不起作用，您必须单击两次，这非常有效

 <script type="text/javascript">
    $('.check').on('change', function() {
        var text = document.getElementById("testing");
        var text2 = document.getElementById("video");
        $('.check').not(this).prop('checked', false)
        var res = $(this).val();
        console.log("res is: " + res);
              if (res == '1') {
                  text.style.display = "block";
                  text2.style.display = "none";
              }
              else {

                  text.style.display = "none";
                  text2.style.display = "block";
              }
    });
  </script>

$（'.check'）。在（'change'，function（）上{
var text=document.getElementById（“测试”）；
var text2=document.getElementById（“视频”）；
$（'.check'）.not（this）.prop（'checked'，false）
var res=$（this.val（）；
console.log（“res是：“+res”）；
如果（res='1'）{
text.style.display=“块”；
text2.style.display=“无”；
}
否则{
text.style.display=“无”；
text2.style.display=“块”；
}
});

你能创建fiddle吗？

3个复选框，一次只能选择一个

-可能要将它们更改为单选按钮-这就是单选按钮的用途，将内置到浏览器中。@lucumt我添加了HTMLcode@freedomn-m是绝对正确的，您可能希望使用单选按钮而不是checkboxes@CurtisBoylan作为freedomn-m说您需要更改为单选按钮，单选按钮就是用来显示的，并且将内置到浏览器中。@lucumt我添加了HTMLcode@freedomn-m完全正确你可能想用收音机按钮而不是checkboxes@CurtisBoylan正如freedomn-m所说，您需要更改为

收音机

此部件工作正常，但这不是问题所在，问题是div没有像我的帖子中解释的那样隐藏/显示。我认为上述代码将满足您的要求，并感谢@CurtisBoylan的评论。这部分工作正常，但这不是问题所在