Question

我正在使用javascript检查复选框是否被选中。有3个复选框，一次只能选择一个。我正在使用下面的代码，效果很好，当我取消选中一个复选框并选中另一个复选框时，div正确显示，但是如果我选择一个然后选择另一个，例如选择了checkbox1和select checkbox2，则“ testing” div仍然出现，而“ video” div没有出现。我想这只是一个非常简单的事情，但我无法解决

HTML

   <div class="row">
      <div class="col-25">
        <label for="lname">Type</label>
      </div>
      <div class="col-75" style="font-size:17px; padding-top:1%;">
       <div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" onclick="myFunction()" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" onclick="myFunction()" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check"  onclick="myFunction()" name="html"></div>
      </div>
    </div>

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>

Answer 1

有些人回答了您，您绝对应该尝试使用某些单选按钮而不是复选框，从而完全避免需要额外的代码来控制基本功能

Answer 2

签出

   <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input.check').on('change', function() {
if($('input.check').is(':checked'))
{
    $('input.check').not(this).prop('checked', false);  
     $('input.check').not(this).parent('div').css('display', 'none');
}
     else{
       $('input.check').parent('div').css('display', '')
     }
})
})
</script>
<body>

         <div class="row">
              <div class="col-25">
                <label for="lname">Type</label>
              </div>
              <div class="col-75" style="font-size:17px; padding-top:1%;">
               <div id="margin" style="margin-right:4%">Image: <input type="checkbox" id="myCheck1" class="check" name="image"></div><div id="margin" style="margin-right:4%">Video: <input type="checkbox" id="myCheck2" class="check" name="video"></div><div id="margin" style="margin-right:4%">HTML<a style="color:red">(not currently in use)</a>: <input type="checkbox" id="myCheck3" class="check" name="html"></div>
              </div>
            </div>
    </body>
    </html>

Answer 3

找到一种解决此问题的简便方法，其他示例有时不起作用，您必须单击两次，才能完美运行。

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

Javascript复选框显示错误

3 个答案: