Jquery 选中复选框时显示另一个选项

选中复选框后，我在尝试显示“T恤”尺寸时遇到问题。我正在使用jQuery，但无法使代码正常工作。以下是我目前的代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('#tshirt').attr('checked'); 
        $("#sizes").show();
    });
);
</script>


<b>Cool T-Shirt</b>: <input type="checkbox" id="tshirt" name="tshirt"> <span class="price">$15</span>            
<span id="sizes"><bSize</b>: <input type="checkbox" name="size" value="S"> <span class="price">Small</span></span>

$（文档）.ready（函数（）{
$（'#tshirt'）.attr（'checked'）；
$（“#大小”）.show（）；
});
);
酷T恤：15美元
您需要将代码放入
click（）
处理程序中，如下所示：

$(document).ready(function () {
    $('input#tshirt').click(function () {
        if($(this).is(':checked')) {
            $("#sizes").show();
        } else {
            $("#sizes").hide();
        }
    });
});

$(document).ready(function() {
    $("#tshirt").change(function() {
        if($(this).is(":checked")) {
             $("#sizes").show();
        } else {
             $("#sizes").hide();            
        }
    });
});

选中复选框时，将显示
#大小
，取消选中时，将再次隐藏大小

不清楚为什么您要使用
$（'#tshirt'）.attr（'checked'）checked=“checked”
添加到
中，即可在页面加载时对其进行检查。
您需要将代码放入
click（）
处理程序中，如下所示：

$(document).ready(function () {
    $('input#tshirt').click(function () {
        if($(this).is(':checked')) {
            $("#sizes").show();
        } else {
            $("#sizes").hide();
        }
    });
});

$(document).ready(function() {
    $("#tshirt").change(function() {
        if($(this).is(":checked")) {
             $("#sizes").show();
        } else {
             $("#sizes").hide();            
        }
    });
});

选中复选框时，将显示
#大小
，取消选中时，将再次隐藏大小

不清楚为什么您要使用
$（'#tshirt'）.attr（'checked'）checked=“checked”
添加到
中，即可在页面加载时将其选中。
.toggle（）应该会处理好它。像这样的

$('#tshirt').click(function () {
$('#sizes').toggle('slow', function() {

“slow”可以替换为“fast”和其他参数。
.toggle（）应该处理它。像这样的

$('#tshirt').click(function () {
$('#sizes').toggle('slow', function() {

“慢”可以替换为“快”和其他参数。
您应该能够执行以下操作：

$(document).ready(function () {
    $('input#tshirt').click(function () {
        if($(this).is(':checked')) {
            $("#sizes").show();
        } else {
            $("#sizes").hide();
        }
    });
});

$(document).ready(function() {
    $("#tshirt").change(function() {
        if($(this).is(":checked")) {
             $("#sizes").show();
        } else {
             $("#sizes").hide();            
        }
    });
});

然后只需确保默认情况下使用CSS隐藏：

#sizes {
    display: none;
}

您应该能够执行以下操作：

$(document).ready(function () {
    $('input#tshirt').click(function () {
        if($(this).is(':checked')) {
            $("#sizes").show();
        } else {
            $("#sizes").hide();
        }
    });
});

$(document).ready(function() {
    $("#tshirt").change(function() {
        if($(this).is(":checked")) {
             $("#sizes").show();
        } else {
             $("#sizes").hide();            
        }
    });
});

然后只需确保默认情况下使用CSS隐藏：

#sizes {
    display: none;
}

这将起作用，但最好检查复选框的状态和操作是否基于此；另一个JS可以改变选中状态，然后你会得到相反的行为；另一段JS可以改变checked状态，然后得到相反的行为。