復選框：取消選中時選中另一個

Question

我想要使用此功能， 取消選中復選框，當一個又一個被選中 ：

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

但是不起作用，因為當您選中另一個復選框時，表內容消失了。

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

在這里我要使用它：

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

有任何想法嗎？

編輯：也許這是問題嗎？

<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

這是一個不需要腳本的簡單解決方案。

 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

看到小提琴： 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

嘗試以下代碼段：

 $('.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

您可以使用單選按鈕代替復選框。 為此，請將輸入類型更改為單選，例如：

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