如何使用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());

演示： 小提琴

Answer 2

你正在swatch下看輸入，但它是swatch-element所以改為低於行

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

至

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

Answer 3

使用這個你使用錯誤的類名稱swatch它應該是swatch-element

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