javascript - 如何定位一个复选框并根据其值显示输入字段

Question

function selectOpenField() {
    $("input[name='vrije_velden']").on('click', function() {

            var $box = $(this);
            if ($box.is(":checked")) {

                var group = "input:checkbox[name='" + $box.attr("name") + "']";
                $(group).prop("checked", false);
                $box.prop("checked", true);

                var val = $(this).val();

                $("input[name='vrije_velden']").each(function(key, value){
                    var $thisValue = $(value).val();
                    if ($thisValue === val) {
                        $('#'+val).slideDown();
                    } else {
                        $(group).slideUp();
                    }
                });
            } else {
                $box.prop("checked", false);
                $(group).slideUp();
            }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
     <input type="checkbox" class="custom-control-input" id="checkbox" 
    value="checkboxHolder" name="vrije_velden">
    <label class="custom-control-label" for="checkbox">Checkbox</label>
 </div>
 <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="radio" 
    value="radioBoxHolder" name="vrije_velden">
    <label class="custom-control-label" for="radio">Radio</label>
</div>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="input" 
    value="inputBoxHolder" name="vrije_velden">
    <label class="custom-control-label" for="input">Input</label>
</div>

我创建了 3 个复选框，但是只能选中一个复选框，不能选中多个。一切顺利。

我的问题

我根据已选中的复选框的值显示某些 div，这有效，但是当我单击另一个复选框以显示 div B 时，div A 不会消失。第二个问题是，当我点击一个复选框并再次取消选中它时，div 仍然存在。

这部分是我最近尝试的一段代码

var val = $(this).val();
                $("input[name='vrije_velden']").each(function(key, value){
                    var $thisValue = $(value).val();
                    if ($thisValue === val) {
                        $('#'+val).slideDown();
                    } else {
                        $(group).slideUp();
                    }
                });

我希望实现的目标

• 3 个复选框，只能选中一个(单选按钮类型)，但用户也应该能够取消选中(这就是我不使用单选按钮的原因)
• 当我点击复选框 A 时，div A 应该显示，当我点击复选框 B 时，复选框 A 变为未选中并且 div A 返回到 display: none，但 div B 显示(等等on) 复选框的值也是 div 的 ID。
• 当我点击复选框 A 时，div A 应该显示，但是当我取消选中复选框 A 时，div A 应该再次显示为display: none。

提前致谢。

Answer 1

如果我正确理解您的问题，应该这样做:

在这段代码中，如果你勾选了一个复选框，它下面的div就会出现，其他的div就会消失，如果你取消选中它，它就会消失。

所以基本上只能看到一个div。

$(function(){
$("input[name='vrije_velden']").on("click",function(){
if($(this).is(":checked")){
$("input[name='vrije_velden']").not($(this)).prop("checked",false);
var val=$(this).attr("value");
$(".div").each(function(){
if($(this).attr("id")==val){
$(this).removeClass("none");
}
else{
$(this).addClass("none");
}
});
}
else{
$(".div").addClass("none");
}
});
});

.none{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
     <input type="checkbox" class="custom-control-input" id="checkbox" 
    value="checkboxHolder" name="vrije_velden">
    <label class="custom-control-label" for="checkbox">Checkbox</label>

 </div>
 <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="radio" 
    value="radioBoxHolder" name="vrije_velden">
    <label class="custom-control-label" for="radio">Radio</label>
 
</div>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="input" 
    value="inputBoxHolder" name="vrije_velden">
    <label class="custom-control-label" for="input">Input</label>

</div>


    <div class="div none" id="checkboxHolder">
Checkbox div
</div>
<br>
   <div class="div none" id="radioBoxHolder">
Radio div
</div>
<br>
    <div class="div none" id="inputBoxHolder">
Input div
</div>