Javascript Checkbox Display Error

Question

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

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 checkboxes and only one can be selected at a time - might want to change them to radio buttons - that's what radio buttons are for and will be built into the browser. — fdomn-m
– fdomn-m, Commented Jun 25, 2018 at 9:58
@freedomn-m is absolutely right you might want to use radio buttons instead of checkboxes — t3__rry
– t3__rry, Commented Jun 25, 2018 at 10:09

Docsnake · Accepted Answer · 2018-06-25 10:22:06Z

1

as some people answered you, you should definitely try using some radio buttons instead of checkboxes avoiding completely the need for extra code controlling basic functionality

answered Jun 25, 2018 at 10:22

Docsnake

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Eshu · Accepted Answer · 2018-06-25 12:28:36Z

1

Check this Out

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

edited Jun 25, 2018 at 12:28

answered Jun 25, 2018 at 10:51

Eshu

1856 bronze badges

2 Comments

Curtis Boylan Over a year ago

This part works fine but that is not the issue, issue is that the div does not hide/show as explained in my post

Eshu Over a year ago

i think above code will fullfil your requirement and thank you @CurtisBoylan for your comment

Curtis Boylan · Accepted Answer · 2018-07-03 15:28:39Z

Found an easy way to fix this, other examples sometimes did not work and you would have to click twice, this works perfect.

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

Collectives™ on Stack Overflow

Javascript Checkbox Display Error

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related