jquery - 如果输入类型复选框的值已选中 ="checked"，则显示/隐藏特定的 div

Question

我想根据某个复选框是否选中来显示/隐藏一个 div。

请注意，这与使用 jQuery .click 或 .change 函数无关。这些在我的情况下不起作用。

我想做的是，如果复选框字段具有值 checked="checked"，则显示某个 div，否则隐藏它。

默认情况下，我不想显示/隐藏任何内容。我只想在复选框未选中并且选中时隐藏，div 应该始终显示(即使在页面加载时)。

这是 Fiddle 的链接(.click 方法，它对我不起作用)https://jsfiddle.net/a5s5s4k3/

您可能会注意到 First Name 复选框已被选中，但其相邻的 div 仍处于隐藏状态。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

编写一个函数，该函数将始终检查复选框的状态并相应地隐藏和显示输入。您可以在文档准备就绪时调用此函数，然后在更改复选框时调用此函数。引用以下代码

 $(function(){
      formatUI();

    $('input[type="checkbox"]').on('change',function(){
       formatUI();
    });

    function formatUI()
    {
        $.each($('input[type="checkbox"]'),function(){
             if($(this).attr('checked') === 'checked')
             {
               $(this).parent().next('p').show();
             }
             else{
              $(this).parent().next('p').hide();
             }
        });
    }


   });

这是一个Wroking Fiddle