-2

私はこれを持っています...

<ul class="article-types">
<li class="article-option">
    <label class="radio">
        <input type="radio" name="optionsRadios" id="first" value="option1">
        Lorem
    </label>
    <p>Lorem ipsum dolor sit amet</p>
</li>
<li class="article-option">
    <label class="radio">
        <input type="radio" name="optionsRadios" id="second" value="option2">
        Ipsum
    </label>
    <p>Lorem ipsum dolor sit amet</p>
</li>

私が欲しいのは、ラジオボタンがチェックされているときに .article-option を .highlight に変更することだけです。ラジオ ボタンが 2 つあることに注意してください (さらに多くの場合もあります)。2 つのliが同時に .highlight を持つことはありません。ラジオボタンの状態に応じていずれか。

jQueryでこれを行うにはどうすればよいですか? jsFiddle は良いことがあります。

ありがとう。

4

6 に答える 6

2

:checked すべてのラジオボタンを調べて、 Check that out: JSFiddleを確認する必要があります。

于 2013-05-15T12:00:07.477 に答える
1

jQuery の.change()メソッドを見てください。

$("input[name=optionsRadios]").on("change", function(event) { /* DO WORK */ });

.click()メソッドを使用することもできますが、時間と経験を通じて、.change が単により良い結果をもたらす多くの状況を発見しました。

また、jQueryの:checkedセレクターを見てください。jQuery：チェック済み

if ($("input[name=optionsRadios]").is(":checked");) { /* DO WORK */ }

別の SO の質問に答えるために作成したこの古い jsFiddle を参照してください。変更に関するいくつかの違いが示され、そのうちの 1 つのチェックボックスをクリックすることさえできます。

于 2013-05-15T11:52:59.623 に答える
1 
$('input[type=radio]').click(function(){
    $('.article-types li').attr('class' , 'article-option');
    if($(this).is(':checked'))
        $(this).parent().parent().addClass('highlight').removeClass('article-option');
    else
        $(this).parent().parent().removeClass('highlight').addClass('article-option');
});
于 2013-05-15T11:53:38.613 に答える
1

デモはこちらhttp://jsfiddle.net/2dJAN/30/

  $(".radio").click(function(){
    $( ".article-option" ).removeClass('highlight')
    if($(".radio").is(':checked')){
        $(this).closest('li').addClass('highlight')
        }
});


.highlight {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}
于 2013-05-15T12:05:55.030 に答える