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显示（依此类推）复选框也是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>

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

1 个答案: