Ошибка отображения флажка Javascript - PullRequest
Новая
       1

Ошибка отображения флажка Javascript

0 голосов
/ 25 июня 2018

Я использую JavaScript, чтобы проверить, отмечен ли флажок или нет.Есть 3 флажка, и только один может быть выбран одновременно.Я использую следующий код, который работает нормально, когда я снимаю флажок и проверяю другой, Div отображается правильно, но если я выберу один, то выберите другой, например, выбрал checkbox1 и выберите checkbox2, div «testing» по-прежнему появляется и div «video»не появляются.Я предполагаю, что это просто что-то очень простое, но я не могу разобраться

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>

Ответы [ 3 ]

0 голосов
/ 25 июня 2018

Проверьте это 

   <!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>
0 голосов
/ 03 июля 2018

Найден простой способ исправить это, другие примеры иногда не работают, и вам придется дважды щелкнуть мышью, это прекрасно работает. 

 <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>
0 голосов
/ 25 июня 2018

так как некоторые люди ответили вам, вам определенно следует попробовать использовать несколько переключателей вместо флажков, чтобы полностью избежать необходимости в дополнительном коде, контролирующем основные функции

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...