Show/Hide 具体 div 如果输入类型复选框中有值 checked="checked"

Question

我想display/hide一个div基于某个复选框是否被选中。

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

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

默认情况下我不想show/hide任何东西。我只想在复选框为 unchecked 且为 checked 时隐藏，div 应始终显示（即使在页面加载时）。

这是 link 到 Fiddle 的方法（.click 方法，它对我不起作用）https://jsfiddle.net/a5s5s4k3/

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

非常感谢任何帮助。

谢谢

Answer 1

    $(document).on("click", "[type='checkbox']", function(e) {
            if (this.checked) {
                $(this).attr("value", "true");
            } else {
                $(this).attr("value","false");}
        });

<input type="checkbox" name="myCheckbox" checked="checked" value="true" />

Answer 2

如果您愿意稍微更改您的标记，您可以使用 pure CSS 来做到这一点。

HTML

<p>
  <input type="checkbox" id="" name="" checked="checked" />
  <label>Enable First Name Field</label>
  <input type="text" id="" class="" name="" value="" />
</p>

<p>
  <input class="check2" type="checkbox" id="" name="" />
  <label>Enable Last Name Field</label>
  <input type="text" id="" name="" value="" />
</p>

CSS

input[type=checkbox] + label + input {
  display: none;
}

input[type=checkbox]:checked + label + input {
  display: block;
}

+ 运算符选择彼此相邻的元素。在这种情况下，我们的目标是复选框旁边的标签旁边的输入。如果您不熟悉兄弟选择器，请查看 MDN reference。它们非常方便。

已更新 fiddle：https://jsfiddle.net/a5s5s4k3/2/

Answer 3

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

 $(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

Show/Hide 具体 div 如果输入类型复选框中有值 checked="checked"

Show/Hide specific div if an input type checkbox has a value checked="checked" in it

html

checkbox

jquery

oncheckedchanged

show-hide