Javascript 从起始价格和；根据选定的收音机和收音机交换图像；复选框

我正在尝试完成一个脚本，该脚本用于构建一个带有多个选项的RV并为其定价。我已经对代码进行了尝试，但我无法计算“总”价格或“图像切换”工作

在“Total”脚本中，我需要将其更改为起始价格为39950.00。不知道怎么调整。我在这里得到了这个脚本：

在“图像切换”脚本中，我不确定我做错了什么。我这里有脚本，但是脚本没有复选框。。。所以我不确定我到底做错了什么

图像切换说明…

我对这个脚本的想法是，所有的图像都是格式化的，所以无论是否选择了一个选项，开关都会构建图像url

我认为它应该如何工作。。。需要确定以下值

图形值-构建图像的第一部分。如果需要，这里有一个默认值。这是一台收音机，所以会选一台

awningValue-构建图像URL的下一部分。如果需要，这里有一个默认值。这是一台收音机，所以会选一台

kingValue-构建图像URL的第三部分。。。如果未选中，则此节将不具有任何值

solarValue-构建图像URL的第四部分。。。如果未选中，则此节将不具有任何值

genbaskValue-构建图像URL的最后一部分，包括.jpg扩展名。如果未选中，则只返回.jpg以完成整个图像URL

因此，如果选择了图形样式3（gr-3），灰色雨篷（雨篷灰色），检查了国王穹顶（opt King），未检查太阳能（opt太阳能），检查了发电机篮（opt genbask）。。。当您切换每个选项时，它会实时返回这些选项的值，图像会切换

在上面的示例中，返回的URL是

/image/build/Red/RB+GA+KD+（无）+BA.jpg等于= /images/build/Red/RBGAKD.jpg（这是将要显示的图像。或者至少这是我希望它工作的方式……但它不是。）

//用于图像交换的脚本
$（“输入：单选[name='graphics']、输入：单选[name='awning']、输入：复选框[name='opt-king']、输入：复选框[name='opt-solar']、输入：复选框[name=opt-'genbask']）。单击（函数（）{//单击任何单选按钮时，此处理程序将运行）。
var graphicsValue=$（“输入：单选[name='graphics']：选中”）.id（）；//查找选中的图形单选按钮。
var awningValue=$（“输入：单选[name='awning']：选中”）.id（）；//查找选中的雨篷单选按钮。
var kingValue=$（“输入：复选框[name='opt-king']：选中”）.id（）；//查找是否选中了opt-king复选框按钮。
var solarValue=$（“输入：复选框[name='opt-solar']：选中”）.id（）；//查找是否选中了opt-solar复选框按钮。
var genbaskValue=$（“输入：复选框[name='opt-genbask']：选中”）.id（）；//查找是否选中了opt-genbask复选框按钮。
var image_name=“”；//将图像名称初始化为空。我们将在执行过程中追加。
开关（图形值）{
案例“gr-1”：
image_name+=“/images/build/Black/BL”；//已选择图形样式1，因此将该值用于图像的第一部分。
打破
案例“gr-2”：
image_name+=“/images/build/Black2/BL”；//已选择图形样式2，因此将该值用于图像的第一部分。
打破
案例“gr-3”：
image_name+=“/images/build/Red/RB”；//已选择图形样式3，因此将该值用于图像的第一部分。
打破
案例“gr-4”：
image_name+=“/images/build/Red/RB”；//已选择图形样式4，因此将该值用于图像的第一部分。
打破
案例“gr-5”：
image_name+=“/images/build/Blue/BU”；//已选择图形样式5，因此将该值用于图像的第一部分。
打破
案例“gr-6”：
image_name+=“/images/build/Blue/BU”；//已选择图形样式6，因此将该值用于图像的第一部分。
打破
案例“gr-7”：
image_name+=“/images/build/Pinstripe/Pin”；//已选择图形样式7，因此将该值用于图像的第一部分。
打破
案例“gr-8”：
image_name+=“/images/build/Pinstripe/Pin”；//已选择图形样式1，因此将该值用于图像的第一部分。
打破
违约：
image\u name+=“/images/build/Black/BL”；//确保存在默认值，否则可能会出现损坏的图像！
打破
}
开关（雨篷值）{
“芒灰”一案：
image_name+=“GA”；//已选择灰色雨篷，因此将该值用于图像的第二部分。
打破
案例“芒蓝”：
image_name+=“BA”；//选择了蓝色雨篷，因此将该值用于图像的第二部分。
打破
违约：
image_name+=“BA”；//确保存在默认值，否则可能会出现损坏的图像！
打破
}
开关（最大值）{
“选择国王”一案：
image_name+=“KD”；//选择了King Dome，因此将该值用于图像的第三部分。
打破
违约：
image_name+=“”；//复选框的默认值处于未选中的默认状态。
打破
}
开关（日光值）{
案例“opt solar”：
image_name+=“SO”//Solar已选中，因此将该值用于图像的第四部分。
布雷
  <script type='text/javascript'> // Script for image swap
  $("input:radio[name='graphics'], input:radio[name='awning'], input:checkbox[name='opt-king'], input:checkbox[name='opt-solar'], input:checkbox[name=opt-'genbask']").click(function() { // This handler runs when any of the radio buttons are clicked.
      var graphicsValue = $("input:radio[name='graphics']:checked").id(); // Find which graphics radio button is checked.
      var awningValue = $("input:radio[name='awning']:checked").id(); // Find which awning radio button is checked.
      var kingValue = $("input:checkbox[name='opt-king']:checked").id(); // Find if opt-king checkbox button is checked.
      var solarValue = $("input:checkbox[name='opt-solar']:checked").id(); // Find if opt-solar checkbox button is checked.
      var genbaskValue = $("input:checkbox[name='opt-genbask']:checked").id(); // Find if opt-genbask checkbox button is checked.

      var image_name = ""; // Initialize the image name to blank. We will be appending as we go.

      switch (graphicsValue) {
          case 'gr-1':
              image_name += "/images/build/Black/BL"; // Graphic Style 1 was selected, so use that value for the first part of the image.
              break;
          case 'gr-2':
              image_name += "/images/build/Black2/BL"; // Graphic Style 2 was selected, so use that value for the first part of the image.
              break;
          case 'gr-3':
              image_name += "/images/build/Red/RB"; // Graphic Style 3 was selected, so use that value for the first part of the image.
              break;
          case 'gr-4':
              image_name += "/images/build/Red/RB"; // Graphic Style 4 was selected, so use that value for the first part of the image.
              break;
           case 'gr-5':
              image_name += "/images/build/Blue/BU"; // Graphic Style 5 was selected, so use that value for the first part of the image.
              break;
          case 'gr-6':
              image_name += "/images/build/Blue/BU"; // Graphic Style 6 was selected, so use that value for the first part of the image.
              break;
           case 'gr-7':
              image_name += "/images/build/Pinstripe/Pin"; // Graphic Style 7 was selected, so use that value for the first part of the image.
              break;
          case 'gr-8':
              image_name += "/images/build/Pinstripe/Pin"; // Graphic Style 1 was selected, so use that value for the first part of the image.
              break;
          default:
              image_name += "/images/build/Black/BL"; // Make sure there is a default value, or a broken image could occur!
              break;
      }

      switch (awningValue) {
          case 'awn-gray':
              image_name += "GA"; // Gray Awning was selected, so use that value for the second part of the image.
              break;
          case 'awn-blue':
              image_name += "BA"; // Blue Awning was selected, so use that value for the second part of the image.
              break;
          default:
              image_name += "BA"; // Make sure there is a default value, or a broken image could occur!
              break;
      }

       switch (kingValue) {
          case 'opt-king':
              image_name += "KD"; // King-Dome was selected, so use that value for the third part of the image.
              break;

          default:
              image_name += ""; // The default value for the checkbox in default state of not being checked. 
              break;
      }

       switch (solarValue) {
          case 'opt-solar':
              image_name += "SO"; // Solar was selected, so use that value for the fourth part of the image.
              break;

          default:
              image_name += ""; // The default value for the checkbox in default state of not being checked.
              break;
      }

       switch (genbaskValue) {
          case 'opt-genbask':
              image_name += "BA.jpg"; // Generator Basket was selected, so use that value for the last part of the image.
              break;

          default:
              image_name += ".jpg"; // The default value for the checkbox in default state of not being checked. This adds .jpg to complete image if Generator Basket is not checked.
              break;
      }

      $('#show_image_text').text(image_name); // Put the image URL
      $('#Show_image').attr('src', image_name); // Put the image value in the formula image field src.
  });
  </script>

                       <script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
   {num = "0";}
  sign = (num == (num = Math.abs(num)));
  num = num.toFixed(2);
  elements= num.split(".");
  num = elements[0];
  cents = elements[1];
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  {num = num.substring(0,num.length-(4*i+3))+','+
   num.substring(num.length-(4*0+3));}
  return (((sign)?'':'-') + '$' + num + '.' + cents)
}

$("input").change(function() {
    var total = 0;
    $("input").each(function() {
        if($(this).is(":checked"))
            total += parseFloat($(this).val());
    });
    $("#total").val(formatCurrency(total));
});
}//]]>  

</script>


  </head>

  <body>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <div style="background: #efefef; width: 600px; padding: 10px;">
  <h3>Image Will be shown in this div</h3>
  <img id="show_image" />
  <img id="show_image_text" />
  </div>

  <div><h2 style=" text-align: left; color: #c84e1e !important;"><span style="font-size:20px; color: #222;">MSRP:</span> $<span id="total">39950.00</span></h2></div>



  <form name="build">
  <h2>Floor Plans</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="floorplan" style="margin-top:-3px;" id="fp-stand" value="0.00" > Standard Floor Plan</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="floorplan" style="margin-top:-3px;" id="fp-tb" value="0.00" > Twin Bed Floor Plan</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <h2>Graphics</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-1" value="0.00" > Black/Gray Style 1</div> 
  </div> 
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-2" value="0.00"> Black/Gray Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-3" value="0.00"> Red/Blue Style 1</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-4" value="0.00"> Red/Blue Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-5" value="0.00"> Dark Blue/Light Blue Style 1</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-6" value="0.00"> Dark Blue/Light Blue Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-7" value="0.00"> Pinstripe Style 1 </div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="graphics" style="margin-top:-3px;" id="gr-8" value="0.00"> Pinstripe Style 2</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <h2>Awnings</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="awning" style="margin-top:-3px;" id="awn-gray" value="0.00"> Gray</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title"><input type="radio" name="awning" style="margin-top:-3px;" id="awn-blue" value="0.00"> Blue</div> 
  </div>
  <div class="build-right"></div>
  </div>

  <h2>Flooring</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Montreal<br />
  <input type="radio" name="flooring" id="floor-montreal" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 1)"> $0 (Standard Option) </div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Canyon<br />
  <input type="radio" name="flooring" id="floor-canyon" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 2)"> $0 (Standard Option)</div>
  </div>

  <div class="build-right"></div>
  </div>
  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Parador<br /> 
  <input type="radio" name="flooring" id="floor-parador" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 3)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Flagstone<br />
  <input type="radio" name="flooring" id="floor-flagstone" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 4)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>



  <h2>Fabrics</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Black Marble<br /> 
  <input type="radio" name="fabric" id="fab-marble" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 1)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Mink<br />
  <input type="radio" name="fabric" id="fab-mink" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 2)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Ocean<br />
  <input type="radio" name="fabric" id="fab-ocean" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 3)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>


  <h2>Countertops</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Standard Countertops & Accents<br /> 
  <input type="radio" name="fg-counter" id="count-stand" style="margin-top:-3px;" value="0.00" onClick="check_value(this, 5)"> $0 (Standard Option)</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Paradise Beach Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-pb" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 1)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Tahoe Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-tahoe" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 3)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Baltic Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-baltic" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 2)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Dakota Fiber-Granite<br /> 
  <input type="radio" name="fg-counter" id="count-dakota" style="margin-top:-3px;" value="1800.00" onClick="check_value(this, 4)"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>



  <h2>Options</h2>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">King-Dome<br /> 
  <input type="checkbox" name="opt-king" style="margin-top:-3px;" id="opt-king" value="1500.00"> $1,500</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Solar Package<br /> 
  <input type="checkbox" name="opt-solar" style="margin-top:-3px;" id="opt-solar" value="1800.00"> $1,800</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Additional Awning<br /> 
  <input type="checkbox" name="opt-awning" style="margin-top:-3px;" id="opt-awning" value="900.00"> $900</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Generator Quick Connect<br /> 
  <input type="checkbox" name="opt-genquick" style="margin-top:-3px;" id="opt-genquick" value="469.00"> $469</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Generator Basket<br /> 
  <input type="checkbox" name="opt-genbask" style="margin-top:-3px;" id="opt-genbask" value="250.00"> $250</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">30lb Propane Tank Upgrade<br /> 
  <input type="checkbox" name="opt-30pro" style="margin-top:-3px;" id="opt-30pro" value="99.00"> $99</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Four Trojan T-105 Batteries<br /> 
  <input type="checkbox" name="opt-batt-t105" style="margin-top:-3px;" id="opt-batt-t105" value="400.00"> $400</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Four Trojan AGM Batteries<br /> 
  <input type="checkbox" name="opt-batt-agm" style="margin-top:-3px;" id="opt-batt-agm" value="900.00"> $900</div>
  </div>
  <div class="build-right"</div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Wireless Back Up Camera<br /> 
  <input type="checkbox" name="opt-cam" id="opt-cam" style="margin-top:-3px;" value="700.00"> $700</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Front Propane Quick Connect<br /> 
  <input type="checkbox" name="opt-front-proconnect" style="margin-top:-3px;" id="opt-front-proconnect" value="170.00"> $170</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Back Propane Quick Connect<br /> 
  <input type="checkbox" name="opt-back-proconnect" style="margin-top:-3px;" id="opt-back-proconnect" value="160.00"> $160</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Four Reading Light Package<br /> 
  <input type="checkbox" name="opt-read" id="opt-read" style="margin-top:-3px;" value="199.00"> $199</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Large Inverter<br /> 
  <input type="checkbox" name="opt-large-inv" style="margin-top:-3px;" id="opt-large-inv" value="1200.00"> $1,200</div>
  </div>
  <div class="build-right"></div>
  </div>

  <div class="build-option">
  <div class="build-left">
  <div class="build-title">Small Inverter<br /> 
  <input type="checkbox" name="opt-small-inv" style="margin-top:-3px;" id="opt-small-inv" value="250.00"> $250</div>
  </div>
  <div class="build-right"></div>
  </div>


  </form>
  </div>

  </body>
  </html>

$("#total").html(formatCurrency(total));

//    storage of price (global).
var total = 39950;

//    create list from JSON.
createList();

//    show price in test div at start.
priceView.html(formatCurrency(total));

//    function to update price on change.
function update(box) {
    //    calculate the price from the value of the selected box.
    var price = parseInt(box.value, 10);
    price = (isNaN(price)) ? 0 : price;

    //    if it is selected, you add the price.
    if (box.checked) total += price;

    //    if not, then remove the price.
    else total -= price;

    //    show the price on a test div.
    priceView.html(formatCurrency(total));

    //    the image to load.
    //img.html('<img src="{0}" />'.f($(box).data('img')));
    img.html($(box).data('img'));
}