我想根据是选中还是取消选中某个复选框来显示/隐藏div。
请注意,这不是关于使用jQuery .click
或.change
函数。这些不适合我的情况。
我想要做的是,如果复选框字段的值为checked="checked"
,则显示某个div,否则将其隐藏。
我不想默认显示/隐藏任何内容。我想隐藏只有当复选框为unchecked
时,如果它是checked
,则div应始终显示(即使在页面加载时)。
这里是指向Fiddle(.click
方法的链接,它对我不起作用)https://jsfiddle.net/a5s5s4k3/
您可能会注意到已经选中了First Name复选框,但其相邻的div仍然是隐藏的。
任何帮助都将受到高度赞赏。
感谢
答案 0 :(得分:2)
如果您愿意稍微更改标记,可以使用纯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。它们非常方便。
答案 1 :(得分:2)
编写一个函数,它将始终检查复选框的状态,并相应地隐藏和显示输入。您可以在文档就绪时调用此函数,然后更改复选框。请参阅以下代码
$(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();
}
});
}
});
答案 2 :(得分:1)
$(document).on("click", "[type='checkbox']", function(e) {
if (this.checked) {
$(this).attr("value", "true");
} else {
$(this).attr("value","false");}
});
&#13;
<input type="checkbox" name="myCheckbox" checked="checked" value="true" />
&#13;