Checkbox: uncheck when on another is checked

Question

I'm trying to use this function to uncheck a checkbox when another one is checked :

<script>
   $('input.unchecked').on('change', function() {
   $('input.unchecked').not(this).prop('checked', false);  
   });
</script>

<script>
$("#checkboxID").change(function(){
$("#tableID tr.rowEG").toggle(!this.checked); 
});

$("#checkbox1OG").change(function(){
$("#tableID tr.row1OG").toggle(!this.checked); 
});

$("#checkbox2OG").change(function(){
$("#tableID tr.row2OG").toggle(!this.checked); 
});

$("#checkbox3OG").change(function(){
$("#tableID tr.row3OG").toggle(!this.checked); 
});   
</script>

But does not works, because when you check another checkbox the table content disappears.

This is the HTML code:

<form class="filter">
   <input type="checkbox" id="checkboxID" class="unchecked"> EG
   <input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
   <input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
   <input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>

And here where I want to use it:

http://develop.nowcommu.myhostpoint.ch/table-test.html

Any ideas?

EDIT: Maybe this is the problem?

<script>
$("#checkboxID").change(function(){
$("#tableID tr.rowEG").toggle(!this.checked); 
});

    $("#checkbox1OG").change(function(){
$("#tableID tr.row1OG").toggle(!this.checked); 
});

    $("#checkbox2OG").change(function(){
$("#tableID tr.row2OG").toggle(!this.checked); 
});

    $("#checkbox3OG").change(function(){
$("#tableID tr.row3OG").toggle(!this.checked); 
});   
</script>

Answer 1

Here is a simple solution without the need of script.

 input{ display:none; } label{ width:25px; height:25px; font-size:16px; cursor:pointer; position:relative; padding-left: 30px; } label ~ label { margin-left: 40px; } label:before, label:after{ top: 0; left: 0; position:absolute; height:15px; width:15px; content:' '; border-radius: 2px; border: 1px #3a3a3a solid; font-weight: bold; } input:checked + label:after{ top: -2px; left: 2px; content: '\\2713'; border: none; } 

 <form class="filter"> <input type="radio" name="radio" id="radio"><label for="radio"> EG </label> <input type="radio" name="radio" id="radio1"><label for="radio1"> 1.OG </label> <input type="radio" name="radio" id="radio2"><label for="radio2"> 2.OG </label> <input type="radio" name="radio" id="radio3"><label for="radio3"> 3.OG </label> </form> 

Answer 2

See the fiddle: https://jsfiddle.net/61eywpzg/

HTML

<form class="filter">
   <input type="checkbox" id="checkboxID" class="unchecked"> EG
   <input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
   <input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
   <input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

jQuery

$('input.unchecked').on('change', function() {
    $('input.unchecked').not(this).prop('checked', false);  
});

Answer 3

Try the below snippet:

 $('.unchecked').click(function(){ $(this).siblings().prop("checked",false) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form class="filter"> <input type="checkbox" id="checkboxID" class="unchecked"> EG <input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG <input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG <input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG </form> 

Answer 4

You can use radio buttons instead of checkboxes. To do this, change the type of your input to radio, example:

<input type="radio" id="checkboxID" class="unchecked">