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 显示（等等）复选框的值也是分区。
• 当我单击复选框 A 时，应该显示 div A，但是当我取消选中复选框 A 时，应该display: none再次显示 div A。

提前致谢。

标签： javascriptjqueryhtml

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>