1

チェックボックスが選択されているときに「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「サイズ」を表示したいということです。

4

3 に答える 3

2

click()次のように、コードをハンドラー内に配置する必要があります。

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

これは#sizes、チェックボックスがオンのときに表示され、オフのときに再び非表示になります。

ページの読み込み時にチェックするように追加する$('#tshirt').attr('checked');だけで、現在の JS にある理由は不明です。checked="checked"<input>

于 2012-04-04T00:34:22.757 に答える
2

次のようなことができるはずです。

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

次に、CSS でデフォルトで非表示になっていることを確認します。

#sizes {
    display: none;
}
于 2012-04-04T00:36:30.580 に答える
0

.toggle() がそれを処理する必要があります。このようなもの..

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

'slow' は 'fast' などのパラメーターに置き換えることができます。

于 2012-04-04T00:34:25.870 に答える