1

ラジオボックスの選択を簡単にするために、これはすでに持っています

$("div.column43").click(function () {
$(this).find('input:radio').attr('checked', true);
});

内部のラジオが選択されたときに、divの背景/境界線を変更したい。

ホバーで境界線を変更しても問題ありませんが、選択が解除されるまで境界線を変更したままにしておきます。

これはページ上のフォーマットです

<div class="row43">
                <div class="column43">
                    <input id="box21" type="radio" name="box21" 
value="" checked> <label for="box21">Any/All</label>    
                </div>
                <div class="column43">
                    <label for="box22">1.0</label><input 
id="box22" type="radio" name="box21" value="1.0">
                </div>
                <div class="column43">
                    <label for="box23">1.1</label><input 
id="box23" type="radio" name="box21" value="1.1">   
                </div></div>

これは、ホバー効果の css です。

div.row43:hover > div {
opacity: 0.5;
}
div.row43:hover > div.column43:hover {
opacity: 1.0;
}
div.row43:hover {
border-color: #0099ff;
}
div.column43:hover {
opacity: 0.5;
border-color: #0099ff;
}

私の人生では、ラジオが選択され、マウスが離れたときに境界線効果を維持する方法がわかりません。

誰かが私が実際のクラスを使用して何をする必要があるかを教えてくれたら素晴らしいでしょう.

ありがとう

4

3 に答える 3

2

ラジオ ボタンの後にラベルを配置できる場合は、これを純粋に CSS で行うことができます。

input[type="radio"]:checked+label {
    background:#faa;
    border:1px solid red;
}

jsFiddle の例

そうでない場合は、jQuery を使用して次のように実行できます。

$("div.column43").click(function () {
    $(this).parent('div.row43').find('label').removeClass('highlight');
    $(this).find('input:radio').attr('checked', true);
    $(this).find('label').addClass('highlight');
});

jsFiddle の例

于 2013-02-21T17:26:34.083 に答える
0

ラジオボタンのイベントを作成してから、親の背景色を設定する必要があります。

$('div.column43').find('input[type=radio]').change(function() {
  if ($(this).prop('checked')) {
    $(this).parent().css('background-color', 'red'));
  }
});
于 2013-02-21T17:28:41.707 に答える
0

これを試してください：

$(':radio:checked').closest('div').addClass('selected');

またはで使用.css()：

$(':radio:checked').closest('div').css({
                                        'border':'solid 1px red', 
                                        'background': '#e2e2e2'
                                       });

最後に、これは次のようになります: checkout fiddle 

$(':radio').change(function () {
    $(this).parent().removeClass('selected');
    $(':radio:checked').closest('div').addClass('selected');
});
于 2013-02-21T17:21:02.307 に答える