javascript - 如何使这个 Javascript 复选框触发操作像我的 CSS 示例一样工作

Question

我使用以下代码来测试页面加载时“是否”选中复选框。 如果是，则会显示某个附加字段(称为 myfield):

<style>
#myfield {
    display: none;
}
</style>    


<input type="checkbox" id="mycheckbox" name="mycheckbox" />

<input type='text' id='myfield' name='myfield' />


<script>
if ($("#mycheckbox").is(":checked")) {
document.getElementById("id").style.display="block";
}
</script>

但是，这仅在页面加载并且复选框已被选中时才有效。当页面加载时未选中该框并且您单击该框时，它不会实时工作。我希望当“选中”该框时隐藏字段立即显示，而无需重新加载页面。然后，我希望 myfield 在取消选中该框时立即隐藏。

任何人都可以指出更好/正确的方法吗？

另外:

值得注意的是:我确实知道如何使用标签在 CSS 中执行此操作，但其他时候我需要使用 javascript。

以下是在现代浏览器中仅使用 CSS 即可正常工作的内容:http://jsfiddle.net/3KTC3/

这是仅 CSS 的 jsfiddle 代码:

<style type="text/css">
.label-for-check {
    display:none;
}

.check-with-label:checked + .label-for-check {
display:block;  
}
</style>   


<div>
<input type="checkbox" id="check" class="check-with-label" />
  <label for="check" class="label-for-check">

        <br /><br />MyField<br />
    <input type='text' id='myfield' name='myfield' size='10'  />
</label>
<div>

Answer 1

您需要附上change事件处理程序。您发布的代码仅在页面加载时执行，它不会监视元素的状态。

这是一个与 CSS 版本等效的 jQuery，其中包含类和相邻选择器:

$('.check-with-label').change(function() {
    $(this).next().toggle(this.checked);
}).change();

Fiddle

说明:this引用被单击的复选框，获取next元素(相当于 CSS + 选择器)和 toggle它的显示基于复选框的选中状态。

另一个版本仅适用于您的 2 个给定 ID:

$('#mycheckbox').change(function() {
    $('#myfield').toggle(this.checked);
}).change();

Fiddle

请注意，您的 CSS 版本与所有桌面浏览器兼容，包括 IE7 及更高版本。考虑一下是否有必要使用JS来实现这一点。

编辑:您必须在附加更改处理程序后触发它，因此如果在加载页面时已选中该复选框，则触发的处理程序将显示该字段。