javascript - Javascript 函数和设置值取决于复选框

Question

我目前正在尝试重新创建在这里找到的这个 Javascript 片段（你必须向下滚动一点到它说Get Started的位置：Javascript Snippet

我在这个 codepen中重新创建了一个版本。但它不能正常工作。我基本上是在尝试在选择烟草/medshare 选项之前让这些值恢复到其原始值。但是，现在，他们不回去，我想不通：/

HTML 文件

<div class="w-full md:w-1/2 p-16 flex-grow-1 flex-shrink-1 text-gray-dark">
         <div class="card">
            <div class="bg-white rounded-18 p-16 relative z-1">
               <ul class="list-reset text-16 font-bold flex-grow-0 flex-shrink-0 flex flex-col justify-between">
                  <li>
                     <div class="mb-18 text-center flex-grow-0 flex-shrink-0">
                        <h4 class="flex justify-center items-center leading-none text-blue-light" style="margin-bottom: 0rem;"><span class="flex-grow-0 flex-shrink-0 text-24 md:text-48 -ml-14 md:-ml-20">$</span> <span class="flex-grow-0 flex-shrink-0 h1_xl2" id="price">319</span></h4>
                        <p class="text-18 font-normal" style="margin-bottom: 1rem">PER MONTH</p>
                     </div>
                  </li>
                  <li class="mb-4 flex-grow-0 flex-shrink-0">
                     <div class="mb-8">
                        <label class="check_box">
                           <input type="radio" id="m" name="radio" value="319" onclick="setPrice()"> 
                           <div class="flex justify-between flex-wrap text-14 sm:text-16 text-blue-light"><span class="flex-grow-0 flex-shrink-0 text-12 sm:text-16">Myself</span> <span class="flex-grow-0 flex-shrink-0 ml-4" id="myselfSmoke">$319/mo.</span></div>
                           <span class="radiomark"></span>
                        </label>
                     </div>
                  </li>
                  <li class="mb-4 flex-grow-0 flex-shrink-0">
                     <div class="mb-8">
                        <label class="check_box">
                           <input type="radio" id="ms" name="radio" value="639" onclick="setPrice()"> 
                           <div class="flex justify-between flex-wrap text-14 sm:text-16"><span class="flex-grow-0 flex-shrink-0 text-12 sm:text-16">Myself + Spouse</span> <span class="flex-grow-0 flex-shrink-0 ml-4" id="msSmoke">$639/mo.</span></div>
                           <span class="radiomark"></span>
                        </label>
                     </div>
                  </li>
                  <li class="mb-4 flex-grow-0 flex-shrink-0">
                     <div class="mb-8">
                        <label class="check_box">
                           <input type="radio" id="mc" name="radio" value="639" onclick="setPrice()"> 
                           <div class="flex justify-between flex-wrap text-14 sm:text-16"><span class="flex-grow-0 flex-shrink-0 text-12 sm:text-16">Myself + Children</span> <span class="flex-grow-0 flex-shrink-0 ml-4" id="mcSmoke">$639/mo.</span></div>
                           <span class="radiomark"></span>
                        </label>
                     </div>
                  </li>
                  <li class="mb-4 flex-grow-0 flex-shrink-0">
                     <div class="mb-8">
                        <label class="check_box">
                           <input type="radio" id="mf" name="radio" value="899" onclick="setPrice()"> 
                           <div class="flex justify-between flex-wrap text-14 sm:text-16"><span class="flex-grow-0 flex-shrink-0 text-12 sm:text-16">Myself + Family</span> <span class="flex-grow-0 flex-shrink-0 ml-4" id="mfSmoke">$899/mo.</span></div>
                           <span class="radiomark"></span>
                        </label>
                     </div>
                  </li>
                  <li class="flex-grow-0 flex-shrink-0 p-8 -mx-8 rounded-6 bg-blue-light">
                     <label class="check_box">
                        <input type="checkbox" name="areYouASmoker" id="smoker" onclick="setSmokerPrice()"> 
                        <div class="text-white">
                           <p class="text-14 leading-none text-center mr-32 md:mr-0">Yes. A member uses tobacco.</p>
                           <p class="text-12 leading-none font-normal text-center mr-32">($75 surcharge)</p>
                        </div>
                        <span class="checkmark"></span>
                     </label>
                  </li>
               </ul>
            </div>
            <div class="bg-gray-lightest px-16 pb-16 pt-48 -mt-32">
               <label class="check_box">
                  <input type="checkbox" name="sayNoToPlus" class="bg-white" id="sayNoToPlus" onclick="setMedicalSharePrice()"> 
                  <div>
                     <p class="leading-thin text-14 text-center mr-24">I have my own <br>Medical Cost Share / Insurance</p>
                  </div>
                  <span class="checkmark"></span>
               </label>
            </div>
         </div>
      </div>
   </div>
   <div class="mt-16">
      <!----> 
      <p class="text-16 mb-16 max-w-500 mx-auto text-center disclaimer">Members age 65 and over are not eligible for Medical Cost Share. Tobacco users will incur an extra $75 surcharge</p>
      <div class="max-w-330 mx-auto text-center"><a href="#" class="btn btn-solid circle btn-bordered border-thin ld_button_5fd7072c59fa5 vc_custom_1607629567903 lqd-unit-animation-done" style="opacity: 1;">
         <span>
         <span class="btn-txt">Enroll Now</span>
         <span class="btn-icon"><i class="icon-arrows_right"></i></span>            </span>
         </a>
      </div>
   </div>

JS文件

  var radios = document.getElementsByName("radio");
  var selected = Array.from(radios).find(radio => radio.checked);
  document.getElementById('price').innerHTML = selected.value;
  
  var myself = document.getElementById('m').checked;
  var MS = document.getElementById('ms').checked;
  var MC = document.getElementById('mc').checked;
  var MF = document.getElementById('mf').checked;

  if (myself === true) {
     document.getElementById('link').href = "https://www.1enrollment.com/order/checkout.cfm?id=575916&pdid=30894&benefitid=51&bSmoker=0&step=2&periodid=1";
  }
  else if (MS === true) {
      document.getElementById('link').href = "https://www.1enrollment.com/order/checkout.cfm?id=575916&pdid=30894&benefitid=41&bSmoker=0&step=2&periodid=1";
  }
    else if (MC === true) {
      document.getElementById('link').href = "https://www.1enrollment.com/order/checkout.cfm?id=575916&pdid=30894&benefitid=117&bSmoker=0&step=2&periodid=1";
  }
    else {
      document.getElementById('link').href = "https://www.1enrollment.com/order/checkout.cfm?id=575916&pdid=30894&benefitid=146&bSmoker=0&step=2&periodid=1";
  }
}

function setSmokerPrice() {
  var smoker = document.getElementById('smoker').checked;
    if (smoker === true) {
      document.getElementById('myselfSmoke').innerHTML = '$394/mo.';
      document.getElementById('msSmoke').innerHTML = '$714/mo.';
      document.getElementById('mcSmoke').innerHTML = '$714/mo.';
      document.getElementById('mfSmoke').innerHTML = '$974/mo.';

    document.getElementById('m').value = '394';
    document.getElementById('ms').value = '714';
    document.getElementById('mc').value = '714';
    document.getElementById('mf').value = '974';

         var myself = document.getElementById('m').checked;
  var MS = document.getElementById('ms').checked;
  var MC = document.getElementById('mc').checked;
  var MF = document.getElementById('mf').checked;
console.log(myself);
    var radios = document.getElementsByName("radio");
    var selected = Array.from(radios).find(radio => radio.checked);
    document.getElementById('price').innerHTML = selected.value;
  }
  else {
         document.getElementById('myselfSmoke').innerHTML = '$319/mo.';
      document.getElementById('msSmoke').innerHTML = '$639/mo.';
      document.getElementById('mcSmoke').innerHTML = '$639/mo.';
      document.getElementById('mfSmoke').innerHTML = '$899/mo.';
  }
  
}

function setMedicalSharePrice() {
 var medicalShare = document.getElementById('sayNoToPlus').checked;
 if (medicalShare === true) {
       document.getElementById('smoker').disabled = true;
          document.getElementById('smoker').checked = false;


    document.getElementById('myselfSmoke').innerHTML = '$125/mo.';
    document.getElementById('msSmoke').innerHTML = '$240/mo.';
    document.getElementById('mcSmoke').innerHTML = '$240/mo.';
    document.getElementById('mfSmoke').innerHTML = '$365/mo.';
  
  document.getElementById('m').value = '125';
  document.getElementById('ms').value = '240';
  document.getElementById('mc').value = '240';
  document.getElementById('mf').value = '365';
  
  var radios = document.getElementsByName("radio");
  var selected = Array.from(radios).find(radio => radio.checked);
  document.getElementById('price').innerHTML = selected.value;
 }
    else {
          document.getElementById('smoker').disabled = false;

         document.getElementById('myselfSmoke').innerHTML = '$319/mo.';
      document.getElementById('msSmoke').innerHTML = '$639/mo.';
      document.getElementById('mcSmoke').innerHTML = '$639/mo.';
      document.getElementById('mfSmoke').innerHTML = '$899/mo.';
  }
}

任何建议都会很棒，谢谢！