复选框:选中另一个时取消选中

Checkbox: uncheck when on another is checked

本文关键字：取消 另一个 复选框      更新时间：2023-09-26

我正在尝试使用此函数在选中另一个复选框时取消选中复选框：

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

这是一个不需要脚本的简单解决方案。

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>

看小提琴：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);  
});

尝试以下代码片段： 

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

您可以使用单选按钮而不是复选框。为此，请将输入的类型更改为无线电，例如： 

<input type="radio" id="checkboxID" class="unchecked">
相关文章：