0

私はjqueryを学ぶのが初めてなので、これが比較的簡単な質問である場合はお詫びします。ChartstoDisplayのIDを持つasp.netチェックボックスリストがあります。個々のリストアイテムのチェックボックスがオンになっているかどうかに応じて、スタイルを前後に切り替えるjqueryを作成しようとしています。私が持っているコードは以下のとおりです。スタイル「選択済み」は、チェックされているチェックボックスを太字の緑色のテキストに変更する必要がありますが、何も起こりません。

<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartstoDisplay').click(function () {
            $('input').each(function () {
                if ($(this).is(':checked'))
                    $(this).toggleClass("selected");
            });
        });

    });
</script>

私の理解では、'input'.eachはチェックボックスリストの項目を繰り返して入力タグを探し、次の行はこの変数を使用して、チェックボックスがチェックされているかどうかをチェックします。それはスタイルです。

4

3 に答える 3

1

できます。しかし、それはおそらくあなたが望むことをしません。まず、添付したCSSを教えてください.selected。

これは、現在チェックされているすべてのボックスを切り替えます。ボックスA、B、Cがあるとしましょう。

  • Aをクリックします。ボックスAがチェックされています。ボックスAが切り替わります。選択されているのはAのみです。
  • Bをクリックします。ボックスAとBがチェックされています。両方が切り替えられます。選択されているのはBのみです。
  • Cをクリックします。ボックスA、B、Cがチェックされています。それらはすべて切り替えられます。これでAとCが選択されました。
  • Bをクリックし、チェックを外します。AとCがチェックされ、切り替えられます（ただし、Bは切り替えられません）。何も選択されていません。

これがあなたの望むものであるなら、素晴らしいですが、この奇妙な振る舞いが必要とされる単一のアプリケーションを考えることはできません。

私があなたが望んでいたと思うのはこれです：

$(document).ready(function () {
    $('#ChartstoDisplay').on("click", "input:checkbox", function() {
        $(this).toggleClass("selected");
    });
});​

編集：フィドルで提供されたコードOPを考えると、ここに更新された答えがあります（フィドル）

$(document).ready(function() {
    $('#ChartstoDisplay').on("click", "input:checkbox", function() {
        $(this).next().toggleClass("selected");
    });
});​
于 2012-05-16T00:18:16.270 に答える
0

コードは有効であるように思われるため、他に何かがあるはずです。いくつかのベストプラクティスだけです。

<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartstoDisplay').click(function () {
            $('input[type="checkbox"]:checked', this).toggleClass("selected");
        });
     });
</script>
  • すべてを選択するinputのではなく、チェックボックスのみを選択してください。
  • クリックしたリストの下にあるチェックボックスのみを選択します。
  • :checkedセレクターを使用して、フィルタリングチェックを削除します。

デモ

于 2012-05-16T00:17:44.033 に答える
0

チェックボックスだけでなく、「＃ChartstoDisplay」に属するものだけでなく、ページ上のすべての入力を$('input').each(...)繰り返し処理します。チェックされたものごとに、クラスを正常に切り替える必要があります-コードにその動作を停止させるものは何も表示されないので、おそらくHTMLを表示できますか？

ただし、コードを単純化して次のようにすることができます。

$('input:checked').toggleClass('selected');

これにより、一致するすべての要素のクラスが切り替わります。を使用して要素を反復処理する必要はありません.each()。

または、「＃ChartstoDisplay」内で入力を行うだけです。これは、実際にやりたいことに近いものです。

$('input:checked', this).toggleClass('selected');

2番目のパラメーターを$()関数に渡すと、その2番目のパラメーターのコンテキスト内の要素のみが選択されます。そのコード行が「#ChartstoDisplay」クリックイベントハンドラー内にある場合this、その時点では「#ChartstoDisplay」になるため、渡します。this

于 2012-05-16T00:20:45.193 に答える