当复选框为真时显示附加数据 Django

Question

我正在使用 Django 进行我的第一个项目，顺便学习一下。目前我被困在项目的一部分，如果复选框被选中，我必须显示额外的数据。

长话短说，我的页面上必须有一个名为“汽车”的复选框，如果用户将复选框选中为 True，则应立即在此复选框下方显示选择汽车型号列表，而不会影响其他输入源在当前页面上。

有没有简单的方法来完成这个？感谢您的帮助。

/编辑

HTML 代码

        <p class="dhcp"> DHCP: {{ form.dhcp }} </p>
        <p class="collapse1 collapse"> IPv4 adresy: {{form.ipv4_adress }} </p>

        <p class="dhcpv6"> DHCPv6: {{ form.dhcpv6 }} </p>
        <p class="collapse2 collapse"> IPv6 adresy: {{form.ipv6_adress }} </p>

JS代码

 $(document).ready(function() {

     $(".dhcp").click(function(event) {
         $(".collapse1").fadeToggle().delay(100);
     });

     $(".dhcpv6").click(function(event) {
         $(".collapse2").fadeToggle().delay(100);
     });
 })

它只是它的一部分，它现在相当“大”并且因为是由 django 形式生成的，所以什么都不说。现在的主要问题是，如果我单击与复选框相同的行，它会触发显示数据的操作。

Answer 1

看看这个 JS Fiddle 。它是一个简单的 JS 解决方案，带有 fadeToggle 来解决您的问题。 100 的延迟是可选的，但它使洞的东西更加优雅，尽管这与您的“应该立即显示”相冲突；）

<input class="collapsed" type="checkbox">Cars
<div class="collapse2 collapse" style="display:none;">
   <li>car hello</li>
   <li>car lala</li>
   <li>car 1</li>
</div>

$(".collapsed").click(function(event){
    $(".collapse2").fadeToggle().delay(100);
})

如果有多个这样的复选框，您可能必须在 JS 中使用 this 关键字。

如果不发表评论，那应该可以解决问题。