ラジオボタンチェックしたときにクラスを追加し、チェックされていないときにクラスを削除します

Question

あなたは私を助けることができますか？クラス '.group_4'のスパンに 'checked'クラスを追加したいと思います。私はjqueryを使うと思った。私はHTMLを変更することはできません。

ここで起こることは、両方のアイテムをクリックするとクラスが削除されないことです。したがって、両方のスパンには "gechecked"というクラスがあります。

簡単な解決方法はありますか？

ありがとうございました。ここで

$(document).ready(function() { 
 
    $(".attribute_list label").click(function() { 
 
    if ($('input.attribute_radio').is(':checked')) { 
 
     $(this).find('.group_4').addClass("gechecked"); 
 
    } else { 
 
     $(this).find('.group_4').removeClass("gechecked"); 
 
    } 
 
    }); 
 
});

<div class="attribute_list"> 
 
    <ul> 
 
    <li> 
 
     <label><div class="radio" style="display: none;"><span class="checked"><input style="display:none !important" type="radio" class="attribute_radio" name="group_4" value="25"></span></div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span class="group_4 gechecked">Graniet</span></label> 
 
    </li> 
 
    <li> 
 
     <label><div class="radio" style="display: none;"><span class=""><input style="display:none !important" type="radio" class="attribute_radio" name="group_4" value="26" checked="checked"></span></div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span class="group_4 gechecked">Composiet</span></label> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

このコード試すfiddle

jQuery(document).ready(function($) { 
    $(".attribute_list label").click(function() { 
    $('.group_4').removeClass("gechecked"); 
    if ($('input.attribute_radio').is(':checked')) { 
     $(this).find('.group_4').addClass("gechecked"); 
    } 
    }); 
}); 

Answer 2

です：あなたはfoはそれを設定する前に、まず_all_関連する要素からクラスを削除

$(document).ready(function() { 
     $(".attribute_list label").click(function() { 
     $(this).find('.group_4').removeClass("gechecked");   
     $('input.attribute_radio:checked').parent().parent().parent().find('.group_4').addClass("gechecked"); 
     }); 
    }); 

Answer 3

jQuery(document).ready(function($) { 
    $(".attribute_list label").click(function() { 
    $('.group_4').removeClass("gechecked"); 
    if ($('input.attribute_radio').is(':checked')) { 
     $(this).find('.group_4').addClass("gechecked"); 
    } 
    }); 
});