javascript - 如何使用复选框的值来隐藏具有相应 ID 的 div？

Question

我正在使用一组复选框，每个复选框对应一个包含内容的 div。我试图对所有复选框只使用一个函数。

我创建了一个函数来查找任何被点击的复选框，识别该复选框是否被选中，然后尝试显示相应的内容。

<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                $($(this).value).show();
            }
            else if($(this).prop("checked") == false){
                $($(#this).value).hide();               
            }
        });
    });
</script>

<input type="checkbox" name="dieConstant" value="'#dc'"> Show Dielectric Constant<br>


<div id="#dc" style="display:none">
    content
</div>

勾选复选框时，“dc”div 中的内容应该出现，但实际上没有。请注意，将“$(this).show(); ”替换为“$(#dc).show(); ”会给出预期的结果，这就是我所需要的，但它需要所有复选框都能正常工作。

Answer 1

为此，最好使用data-attribute。我将其命名为 data-id。 value 属性仍然可用于保存实际值。

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $($(this).data('id')).show();
        }
        else if($(this).prop("checked") == false){
            $($(this).data('id')).hide();

        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="dieConstant" value="" data-id="#dc"> Show Dielectric Constant (dc)<br>

<input type="checkbox" name="dieConstant" value="" data-id="#dc2"> Show Dielectric Constant (dc2)<br>

<div id="dc" style="display:none">
    content dc
</div>

<div id="dc2" style="display:none">
    content dc2
</div>

@Rory McCrossan 提出的使用 toggle() 减少代码的好建议:

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        $($(this).data('id')).toggle();
    });
});