javascript - 为什么这段代码不隐藏复选框？

Question

我只想在某个其他复选框被选中时在表单中显示一些输入复选框。

我读过有关 .show() 和 .hide() 的内容，但我想更改 css 选择器。

我的问题是隐藏的选择器根本没有隐藏:它是在不考虑复选框的情况下打印出来的。

请注意，这只是一个测试，我正在学习 jQuery 并想尝试一下。

这是我试过的(JSfiddle)

HTML 格式:

<form name="ejemplo">
    <input type="checkbox" name="checkbox1" id="idCheckbox1" value="check" checked>Sí? &nbsp; &nbsp;
    <input type="checkbox" name="checkbox2" id="idCheckbox2" value="check">No &nbsp; &nbsp;
    <div id="ocultar">
        <input type="checkbox" name="checkbox3" id="idCheckbox3" value="check">Tal Vez</div>
</form>

JS

    //Usamos jQuery para mostrar un elemento condicionalmente
   if ( $("input:checkbox[id=idCheckbox2]:checked") ) 
       $("#ocultar").css("display","inline");
    else
       $("#ocultar").css("display","none");

Answer 1

由于 id 是唯一的，您可以使用

$("#idCheckbox2") 

代替

$("input:checkbox[id=idCheckbox2]")

要检查复选框是否被选中，您可以使用 .is() :

if($("#idCheckbox2").is(":checked"))
    $("#ocultar").css("display","inline");
else
    $("#ocultar").css("display","none");

您还需要使用 .change() 当您的复选框被更改并使用三元运算符缩短您的代码时跟踪的事件:

$('#idCheckbox2').change(function () {
    $("#ocultar").css("display", this.checked ? 'inline' : "none");
}).change();

末尾的 .change() 用于在页面加载时触发 change() 事件，并在您的复选框默认选中时执行代码。

Fiddle Demo