根据复选框的选中状态控制元素

Question

我有一个代码，我想显示和隐藏的东西，这取决于复选框的选中状态。

My HTML code

<div class="row checks">
<div class="col">
<input type="checkbox" name="partial-vaccinated" class="partial-check" checked>
<label for="level-of-vaccination">Partially Vaccinated</label>
</div>
<div class="col">
<input type="checkbox" name="fully-vaccinated" class="fully-check">
<label for="level-of-vaccination">Partially Vaccinated</label>
</div>
</div>
<div class=".form-block">I want to hide this(for example)</div>

My Javascript code

$("input:checkbox").on('click',function(){
$("input:checkbox").not(this).prop('checked', false);
})
$(".partial-check, .fully-check").on('click', function(){
$(".form-block").slideToggle(500);
})

所以这个javascript代码工作，但是，当我单击完全接种标签的复选框时，我希望表单块隐藏，这是不发生的。只有当我点击部分接种疫苗复选框时，我才能看到切换行为。

Answer 1

<div class=".form-block">I want to hide this(for example)</div>

应该

<div class="form-block">I want to hide this(for example)</div>

类名只能以下划线、连字符或A -z中的字母开头。句点是无效的类名。

$("input:checkbox").on('click',function(){
$("input:checkbox").not(this).prop('checked', false);
})
$(".partial-check, .fully-check").on('click', function(){
$(".form-block").slideToggle(500);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row checks">
<div class="col">
<input type="checkbox" name="partial-vaccinated" class="partial-check" checked>
<label for="level-of-vaccination">Partially Vaccinated</label>
</div>
<div class="col">
<input type="checkbox" name="fully-vaccinated" class="fully-check">
<label for="level-of-vaccination">Partially Vaccinated</label>
</div>
</div>
<div class="form-block">I want to hide this(for example)</div>