Question

我使用以下代码测试＆＃34; if＆＃34;在页面加载时选中一个复选框。如果是，那么将显示某个附加字段（称为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>

但是，这仅在加载页面并且已选中复选框时才有效。当页面加载时未检查框时，它不会正常工作，您可以单击该框。当盒子被检查时，我希望隐藏的字段立刻显示出来＃34;没有页面必须重新加载。然后，当盒子未经检查时，我希望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事件处理程序。您发布的代码仅在加载页面时执行，不会监视元素的状态。

这是一个jQuery，相当于带有类和相邻选择器的CSS版本：

$('.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。

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

Answer 2

$(document).ready(function(){
    if($("#mycheckbox").is(":checked")) $('#myfield').show();

    $('#mycheckbox').on('change', function(){
        if($(this).is(":checked")) {
            $('#myfield').show();
        } else {
            $('#myfield').hide();
        }
    })
});

Answer 3

您的问题是 jQuery只会检查一次（当您加载网站时），如果选中了复选框。

每次用户更改复选框时，系统都会触发更改处理程序，如果已取消，则会显示#myfield

做这样的事情：

$('#mycheckbox').change(function() {
    if ($(this).is(":checked")) {
      $('#myfield').show()
    }
});

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

3 个答案: