0

こんにちは、ユーザーがページのチェックボックスをクリックしたかどうかに基づいて div を非表示または表示する簡単なスクリプトを取得しようとしています。

編集したい要素とスクリプトを記述したテスト HTML がありますが、テストすると firebug が発生し、Chrome 開発者コンソールにエラーが表示されたり、スクリプトが呼び出されたりすることさえあります。

私は参考のためにこれらの両方を見てきました：

jQueryでチェックボックスがチェックされているかどうかを確認するには?
ラジオボタンが選択されていない限り、チェックボックスをグレーアウトする方法は?

これは、私が使用する jQuery ライブラリへのリファレンスです。

<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

私が働こうとしているスクリプトと同様に：

$('extendedStay').click(function(){
  $('#extendedQuarter').toggle(this.checked);
});

そして、私が働こうとしている要素:

<div id="extendedResponse" align="left">
    <form action="">
        <div name="extendedStayResponses">
            <input type="checkbox" name="extendedStay" id="extendedStay"/>Yes
        </div>
        <div id="extendedQuarter" style="display:none">
            <select name="extraQuarters" selected="1">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </div>
    </form>
</div>

関数を不適切に実装しているだけですか、それとも構文エラーが表示されていませんか。

4

1 に答える 1

4

#ID セレクター用の を追加します。また、このスクリプトがページの読み込み時に実行されている場合は、$(document).ready()関数なしで配置する必要があります。

  <script>
      $(document).ready(function(){
        $('#extendedStay').click(function(){
            $('#extendedQuarter').toggle(this.checked);
        });
      });
    </script>

作業例: http://jsfiddle.net/Lv8eX/

于 2013-03-10T17:33:01.630 に答える