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

请尝试以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以使用单选按钮代替复选框。为此，请将输入的类型更改为radio，例如：

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

复选框：取消选中何时选中另一个复选框

4 个答案: