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

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

Answer 2

您需要使用更改事件处理程序，以便根据复选框的选中/取消选中来更新显示属性

$('#idCheckbox2').change(function(){
    $("#ocultar").css("display", this.checked ? 'inline':"none");
}).change();//used to set the initial state based on checkbox value

演示：Fiddle

您甚至可以使用.toggle()来简化this fiddle

中的代码