0

このちょっとしたjqueryに問題があります。ページが読み込まれると、id_2 は非表示になります。チェックボックスid_1をチェックしても何も起こりません。ただし、ページをリロードすると、id_2 が表示されます。

<head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">  /script>
</head>


<input id="id_1" type="checkbox" name="ck1">
<input type="text" id="id_2" name="tx1">

<script type="text/javascript">
         $(document).ready(function() {
             if ($('#id_1').is(':checked'))  {
                 ($('#id_2').show());
             } else {
                 ($('#id_2').hide());
             }
});

ボタンを使用すると、 

$("#show_button").click(function()

それは動作します - id_2 は正しく表示/非表示になります。チェックボックスをオンにすると、チェックされた値がtrue / falseから切り替わることがfirebugでわかります。

私は何を間違っていますか？

オリ

4

4 に答える 4

2

clickまたはchangeイベント内にロジックを配置する必要があります。そうしないと、サーバーからの値に従って非表示/表示するだけです。

また変更

if ($('#id_1').is('checked'))

に

if ($('#id_1').is(':checked'))

また、他のユーザーが指摘したように (ここにコードを貼り付けるときにタイプミスかどうかはわかりません)、jquery 参照に構文エラーがあります。これで変更

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
于 2012-08-14T20:13:16.347 に答える
1

次のことを試してください。

$(document).ready(function() {
    $('#id_2').css('display', $('#id_1').is(':checked') ? 'block' : 'none');

    $('#id_1').change(function(){
        $('#id_2').css('display', this.checked ? 'block' : 'none')
    })
});
于 2012-08-14T20:15:02.840 に答える
1

これは、イベント ハンドラーがないためです。ページの読み込み時にチェックボックスがオンになっているかどうかを確認しているため、チェックボックスをオンにしてページを更新すると、ブラウザーはチェックボックスがオンになっていることを記憶するため、ページの再読み込み時にイベントが発生します ( を表示#id_2) 。

ページのリロードを必要とせずに動的にしたい場合は、イベント ハンドラー (クリックなど) を追加します。

$('#id_1').click(function(){
    if ($('#id_1').is(':checked')){
         $('#id_2').show();
    } else {
         $('#id_2').hide();
    }
});
于 2012-08-14T20:15:18.927 に答える
0 
<input id="id_1" type="checkbox" name="ck1">
<input type="text" id="id_2" name="tx1" style="display:none;">

<script>
$('#id_1').change(function(){
    if ($('#id_1').is(':checked'))  {
        $('#id_2').show();
    } else {
        $('#id_2').hide();
    }
});
</script>

</p>

于 2012-08-14T20:19:07.597 に答える