jquery - 选中复选框时显示另一个选项

Question

选中复选框时，我在尝试显示“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>

目前 ID“sizes”通过 CSS设置为display: none 。我遇到的困难是当用户选择 ID 为“tshirt”的复选框时，我希望显示 ID“sizes”。

Answer 1

您需要将代码放入click()处理程序中，如下所示：

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

这将#sizes在选中复选框时显示，并在未选中时再次隐藏它们。

目前尚不清楚为什么您$('#tshirt').attr('checked');在当前的 JS 中存在，因为您可以简单地添加checked="checked"到您的 JS<input>以使其在页面加载时检查。

Answer 2

你应该能够做这样的事情：

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

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

#sizes {
    display: none;
}

Answer 3

.toggle() 应该照顾它。像这样的东西。。

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

'slow' 你可以用'fast' 和其他参数替换。