如果输入类型复选框的值为checked =“checked”，则显示/隐藏特定div

我想根据某个复选框被选中还是未选中来显示/隐藏div。如果输入类型复选框的值为checked =“checked”，则显示/隐藏特定div

请注意，这不是关于使用jQuery .click或.change函数。这些对我来说不起作用。

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

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

这里是链接到小提琴（.click方法，它并没有为我工作）https://jsfiddle.net/a5s5s4k3/

您可能注意到了名复选框已被选取，但与其相邻的div仍有隐忧。

任何帮助将不胜感激。

感谢

来源

2016-02-27 absikandar

要么不隐藏文本框或从复选框去除检查属性。 https://jsfiddle.net/a5s5s4k3/1/ –

这是因为没有'click'事件被触发以显示输入...您可以随时运行DOM检查一旦准备就绪... – NewToJS

感谢您的意见。 \t \t 请再次看到问题，我编辑了描述。 – absikandar

写一个函数，它会经常检查复选框的状态和隐藏，并相应地显示输入。你可以在文档准备好的时候调用这个函数，然后改变复选框。请参阅下面的代码

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

来源

2016-02-27 18:56:42

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

来源

2016-02-27 14:04:31

，如果你愿意改变你的标记一点你可以用纯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。他们非常方便。

更新小提琴：https://jsfiddle.net/a5s5s4k3/2/

来源

2016-02-27 18:34:33 Stef

谢谢你的解决方案也可以。 – absikandar

即使用户禁用了JavaScript，它也有工作奖金。要记住的事情。 – Stef

如果输入类型复选框的值为checked =“checked”，则显示/隐藏特定div

回答

相关问题