Как получить значение выбранного переключателя с jQuery

Question

Я пытаюсь дать элементу .active-color значение выбранного переключателя.

Текст в active-color должен быть изменен на выбранный переключатель. Что мне не хватает?

HTML-

<div class="swatch"> 

    <div class="swatch-element schwarz">  
     <div class="tooltip">Schwarz</div>   
     <input id="schwarz" type="radio" name="properties[Farbe]" value="Schwarz" data-image="url({{ 'schwarz.jpg' | asset_url }})" checked="checked">   
     <label for="schwarz"></label>   
    </div> 

    <div class="swatch-element weiss">  
     <div class="tooltip">Weiss</div>   
     <input id="weiss" type="radio" name="properties[Farbe]" value="Weiss" data-image="url({{ 'weiss.jpg' | asset_url }})">   
     <label for="weiss"></label>   
    </div> 

    <div class="swatch-element chamois">  
     <div class="tooltip">Chamois</div>   
     <input id="chamois" type="radio" name="properties[Farbe]" value="Chamois" data-image="url({{ 'chamois.jpg' | asset_url }})">   
     <label for="chamois"></label>   
    </div> 

</div> 
<span class="active-color"></span> 

И Функция:

jQuery('.active-color').text($(".swatch input:checked").val()); 

Answer 1

Может быть имя класса swatch, он должен быть swatch-element

jQuery('.active-color').text($(".swatch-element input:checked").val()); 

Demo: Fiddle

Answer 2

Вы ищете вход под swatch но swatch-element так изменить ниже линии

jQuery('.active-color').text($(".swatch input:checked").val()); 

в

jQuery('.active-color').text($(".swatch-element input:checked").val()); 

Answer 3

Используйте этот Youre используется имя swatch неправильный класс, как надо be swatch-element

jQuery('.active-color').text($(".swatch-element input:checked").val());