2

我正在使用以下代码来测试“是否”在页面加载时选中了复选框。如果是，则将显示某个附加字段（称为 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>
4

3 回答 3

1

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

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

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

小提琴

说明：this引用被点击的复选框，根据复选框的选中状态获取next元素（相当于您的 CSS+选择器）toggle及其显示。

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

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

小提琴

请注意，您的 CSS 版本与所有桌面浏览器兼容，包括 IE7 及更高版本。考虑是否有必要为此使用JS。

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

于 2013-03-14T17:47:19.270 回答
1 
$(document).ready(function(){
    if($("#mycheckbox").is(":checked")) $('#myfield').show();

    $('#mycheckbox').on('change', function(){
        if($(this).is(":checked")) {
            $('#myfield').show();
        } else {
            $('#myfield').hide();
        }
    })
});
于 2013-03-14T17:51:04.770 回答
1

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

每次用户更改复选框时，更改处理程序都会触发，如果它被选中，它将显示#myfield

做这样的事情：

$('#mycheckbox').change(function() {
    if ($(this).is(":checked")) {
      $('#myfield').show()
    }
});
于 2013-03-14T17:53:09.637 回答