获取单选按钮值，但存在可变问题

编辑、更新

非常感谢Shailendra Sharma的帮助：）不过，每个人的回答都教会了我一些东西，所以谢谢大家！

---

首先，这是我的问题：

我正在努力使其在单击单选按钮时，它将在两个表单字段中将单选按钮的值添加到两个不同的变量中（选择1和2）

之后，它将把这些路径添加到$htmlImagePath变量中。在用户点击两个选项后，它将完成该路径，并且它将是一个图像源路径，此时我将有代码将该完整路径附加到HTML并显示图像。

不幸的是，我遇到了一个问题。我不太确定我做错了什么，但原始的console.log显示了两个值应该在的"对象"（在本例中为"cs"answers"schwarz"），当我单击表单按钮时，什么都没有发生。

我尝试了一些不同的方法，但遇到了类似的问题。完全卡住了，我的大脑现在被炸了帮助XD-

这是JS fiddle：https://jsfiddle.net/1qk59sk7/

  $(document).ready(function() {
      var $htmlImagePath = "<img src='images/";
      var $selection1 = ($("input[type=radio][name='finishes'][value='cs']").prop("checked", true));
      var $selection2 = ($("input[type=radio][name='colours'][value='schwarz']").prop("checked", true));
      $("#finish input:radio").on("click", function() {
          $selection1 = $("#finish input:checked").val(); 
      });
      $htmlImagePath = $htmlImagePath + $selection1 + '-';
      $("#color input:radio").on ("click", function() {
          $selection2 = $("#color input:checked").val();
      });
      $htmlImagePath = $htmlImagePath + $selection2 + ".jpg'";
      console.log($htmlImagePath);
  }); 

这是HTML

 <div id="finish" class="spalte3">
  <p >Ausfuehrungen Rahmen:</p>
   <form>
    <div>
      <input type="radio" name="finishes" value="cs" class="image_selection">
      <label for="cs">Chrome glanz</label>
    </div>
    <div>
     <input type="radio" name="finishes" value="cbr"   class="image_selection">
     <label for="cbr">Chrome gebuerstet</label>
    </div>
    <div>
      <input type="radio" name="finishes" value="cbl" class="image_selection">
      <label for="cbl">Schwarz verchromt</label>
    </div>
  </div>
</form>
<div id="color" class="spalte3">
  <p>Ausfuehrungen Tablare:</p>
   <form>
     <div>
       <input type="radio" name="colours" value="schwarz"  class="image_selection">
       <label for="schwarz">Schwarz</label>
     </div>
    <div>
      <input type="radio" name="colours" value="weiss-s" class="image_selection">
      <label for="weiss-s">Weiss</label>
    </div>
     <div>
      <input type="radio" name="colours" value="dunkelrot" class="image_selection">
      <label for="dunkelrot">Dunkelrot</label>
     </div>
     <div>
      <input type="radio" name="colours" value="fango"   class="image_selection">
      <label for="fango">Fango</label>
     </div>
    </form>
   </div>
 <div id="log" class="spalte3">
    <img class="skizze-res" src="images/poolfinish/cs-schwarz.jpg"   alt="Chrom glanz mit Schwarz">
 </div> 

  $(document).ready(function(){
        var $htmlImagePath = "<img src='images/";
        var $selection1 = ($("input[type=radio][name='finishes'][value='cs']").prop ("checked", true));
        var $selection2 = ($("input[type=radio][name='colours'][value='schwarz']").prop ("checked", true));
            $("#finish input:radio,#color input:radio").on ("click", function(){
                $selection1 = $("#finish input:checked").val(); 
                $selection2 = $("#color input:checked").val();
                $htmlImagePath = $htmlImagePath + $selection1 + '-';
                $htmlImagePath = $htmlImagePath + $selection2 + ".jpg'";
                console.log($htmlImagePath);
         });
    }); 

$("#finish input:radio").on ("click", function(){
    $selection1 = $("#finish input:checked").val(); 
    $htmlImagePath = $htmlImagePath + $selection1 + '-';
    newPath();
}); 
$("#color input:radio").on ("click", function() {
   $selection2 = $("#color input:checked").val();
   $htmlImagePath = $htmlImagePath + $selection2 + ".jpg'";
   newPath();
});
function newPath(){
   console.log($htmlImagePath);
}

$selection1.val()
$selection2.val()

$htmlImagePath = $htmlImagePath + $selection1.val() + '-';
$htmlImagePath = $htmlImagePath + $selection2.val() + ".jpg'";