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“大小”。

Answer 1

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

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

选中此复选框后，系统会显示#sizes，并在取消选中后再次隐藏它们。

目前还不清楚为什么你当前的JS中有$('#tshirt').attr('checked');，因为你可以简单地将checked="checked"添加到<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() {

'慢'你可以用'fast'和其他参数代替。

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

3 个答案: