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

我使用一组复选框，每个复选框对应一个包含内容的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>

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
if（$（this）.prop（“选中”）==true）{
$（$（this.value）.show（）；
}
else if（$（this）.prop（“选中”）==false）{
$（$（#this）.value.hide（）；
}
});
});
显示介电常数

内容

勾选复选框时，“dc”div中的内容应显示，但不会显示。请注意，将“$（this）.show（）；”替换为“$（#dc）.show（）；”将给出预期的结果，这正是我所需要的，但它需要使用所有复选框。

$（此）

在该上下文中引用该复选框

$（'#dc'）

是正确的

编辑

根据您的评论，您可以获得单击复选框的值，如下所示：

var divId = $(this).attr('value')

然后您可以在

div

选择器中使用该值：

$(divId).show() // or hide()

---

为此，最好使用

数据属性

。我把它命名为

数据id

。

值

属性仍然可用于保存实际值

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
if（$（this）.prop（“选中”）==true）{
$（$（this.data（'id'））.show（）；
}
else if（$（this）.prop（“选中”）==false）{
$（$（this.data（'id'））.hide（）；
}
});
});

显示介电常数（dc）

显示介电常数（dc2）

内容dc
内容dc2


$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
if（$（this）.prop（“选中”）==true）{
$（$（this.data（'id'））.css（'display'，'block'）；
}
else if（$（this）.prop（“选中”）==false）{
$（$（this.data（'id'））.css（'display'，'none'）；
}
});
});
显示介电常数（dc）

显示介电常数（dc1）

内容dc
dc1

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。单击（函数（）{
设div=$（this.attr（“value”）；
if（$（this）.prop（“选中”）==true）{
$（div.show（）；
}否则{
$（div.hide（）；
}
});
});

显示介电常数

内容
我知道$（'#dc'）可以工作，但我有许多复选框，我希望此函数能对所有复选框工作。也就是说，选中复选框值“#VR”时，将显示div id=“#VR”，而不写入第二个相同的函数。请花时间描述问题所在以及此解决方案的帮助原因。请记住，我们在这里是为了教育人们，而不仅仅是为他们编写代码。请花时间描述问题是什么，以及为什么这个解决方案有帮助。记住，我们来这里是为了教育人们，而不仅仅是为他们编写代码。@Rorymcrossan抱歉！我会做的。谢谢