0

私が間違っていない限り。:checkedjQuery と CSS では、セレクターの扱いが大きく異なります。私が使用するCSS:checkedでは、クリックするとスタイルが適切に適用されますが、jQueryでは、ページロード時にDOMに元々あったものしか認識しないようです。何か不足していますか？

これが私のフィドルです

jQuery の場合:

$('input:checked').click(function () { 
   $('input:checked').css('background','#FF0000');
   $('input:checked+label').css('background','#ff0000');
});

CSS で:

input:checked+label {font-weight:bold;color:#5EAF1E}

更新: 私がしようとしていることは、ユーザーが既に選択されているラジオ ボタンをクリックした場合の動作のトリガーであることを明確にする必要があります。

4

3 に答える 3

6

この方法でハンドラーを設定してみてください。

$('body').on('click', 'input:checked', function() {
  // ...
});

あなたが持っている方法では、そのコードが実行されたときにチェックされるすべての要素を見つけています。上記はイベントバブリングを使用して、各「クリック」が発生したときにテストが行​​われるようにします。

ハンドラー内では、特定のクリックで変更されるのは 1 つだけですが、チェックされているすべての要素のスタイルを更新しています。チェックボックスの数が多すぎなければ、大したことではありません。

編集— さらに考えて、役立つフォローアップの質問をすると、ラジオ ボタンの「クリック」イベントのイベント ハンドラー内では、ボタンは常に「:checked」になることがわかります。「checked」プロパティの値は、イベントが送出される前にブラウザーによって更新されます。(イベントの既定のアクションが防止されると、逆になります。)

.data()クラスを追加するか、「チェック済み」プロパティのシャドウを追跡するために使用する必要があると思います。ボタンをクリックすると、独自のフラグが設定されているかどうかがわかります。もしそうなら、それはボタンがクリックされる前に設定されたことを意味します。そうでない場合は、フラグを設定します。また、同様の名前のすべてのラジオ ボタンのフラグをクリアすることもできます。

于 2013-01-31T22:04:53.120 に答える
2

最初にチェックされた入力のみにイベントをバインドしました。:checked最初のセレクターから削除すると、意図したとおりに機能します (ただし、醜いです)。

http://jsfiddle.net/8rDXd/19/

$('input').click(function () { 
    $('input:checked').css('background','#FF0000');
    $('input:checked+label').css('background','#ff0000');
});

もちろん、jQuery で行った css の変更を「元に戻す」必要があります。

$('input').click(function () { 
    $('input').css('background','').filter(":checked").css('background','#FF0000');
    $('input+label').css('background','');
    $('input:checked+label').css('background','#ff0000');
});

http://jsfiddle.net/8rDXd/20/

于 2013-01-31T22:06:07.963 に答える
1

更新後

ラジオ ボタンの状態を追跡します。たとえば.data()、ラジオ ボタンのメモリ内状態を保持するために使用します。

$(function () {
    var $radio = $(":radio");
    $radio.filter(":checked").data("checked", true);
    $radio.on("click", function () {
        if ($(this).data("checked")) {
            alert("Already selected");
        }
        $radio.data("checked", false).filter(":checked").data("checked", true);
    });
});

ここでライブを見てください。

更新前

ここを利用したいと考えています.change()。

$('input:radio').change(function () {
    $('input, input+label').css('background', '');
    $('input:checked, input:checked+label').css('background', '#f00');
}).change();

ここでライブを見てください。

于 2013-01-31T22:15:22.950 に答える