0

タッチ スクリーン デバイスで使用する単純なインタラクティブ フォームを作成しようとしています。フォームの大部分は、5 つのグループ (約 37 グループ) のラジオ ボタンで構成されています。各ラジオ ボタンにラベル タグがあり、選択 (クリック) すると、各ラベル タグ内でこの JavaScript を使用して、ラベルの background-color プロパティが強調表示された色に変更されます。OnClick="this.style.background='#5555ff';"

上記に追加したいのは、グループ内で選択が変更された場合に上記を削除する JavaScript です。たとえば、ユーザーがグループ 1 のラジオ ボタン A を選択し、その選択をグループ 1 のラジオ ボタン B に変更します。現時点では、両方のラベルの背景が定義された色に変更されます。

HTML フォームは PHP によって動的に作成されるため、ラジオ ボタンの名前、ID、および値は異なります。

私はこのタスクを自分で完了しようとして失敗しましたが、単純なものもないようですOnUnClick="xxx"。私はここで解決策を探しましたが、同様の問題に対する既存の解​​決策を微調整しようとしましたが、役に立たなかったにもかかわらず、私のものと一致する質問はありませんでした。

読んでくれてありがとう！

4

2 に答える 2

0

どうぞ：

HTML

<html>
    <body>
        <div>
        <input type="radio" id="g1v1" name="g1" value="v1" checked="checked"/> <label for="g1v1">V1</label>
        </div>
        <div>
        <input type="radio" id="g1v2" name="g1" value="v2" /> <label for="g1v2">V2</label>
        </div>
        <div>
        <input type="radio" id="g1v3" name="g1" value="v3" /> <label for="g1v3">V3</label>
        </div>
        <div>
        <input type="radio" id="g1v4" name="g1" value="v4" /> <label for="g1v4">V4</label>
        </div>
    </body>
</html>

Javascript

$(document).ready(function(){
    var selectedRadioColor = "yellow";
    var normalRadioColor = "gray";
    // For changing color while document loads
    $.each($(":radio"), function(){
        //alert( $(this).prop("id")+ $(this).prop("checked") );
        if($(this).prop("checked") == false)
        {
            $(this).parent().css("color", normalRadioColor);
        }
        else
        {
            $(this).parent().css("color", selectedRadioColor );
        }
    })
    // For updating color when user interacts with radio buttons
    $(":radio").click(function(){
        $("[name='"+$(this).prop("name")+"']").parent().css("color", normalRadioColor);
        $(this).parent().css("color", selectedRadioColor );

    })
})

ライブ デモ用の jsfiddle へのリンクは次のとおりです: http://jsfiddle.net/dharmavir/6UnDs/

于 2012-05-27T11:44:48.650 に答える
0

ラジオボタンが次のようなdivにグループ化されていると仮定します-

<div class="radio-group">
    <INPUT TYPE=RADIO NAME="pizzasize" VALUE="S">small<BR>
    <INPUT TYPE=RADIO NAME="pizzasize" VALUE="M">medium<BR>
    <INPUT TYPE=RADIO NAME="pizzasize" VALUE="L">large<P>
</div>

あなたはjqueryでこのようなことをすることができます -

$('input[type="radio"]').click(function(){
    var parentElement = $(this).parent();
    parentElement.find('input').css('background', '#000000'); //set to your neutral background for radio buttons
    $(this).css('background', '5555ff');
});
于 2012-05-27T10:41:28.177 に答える