有没有办法通过单击复选框来更改和显示单选按钮的值

Question

我正在尝试加深对 JavaScript 的理解，并且希望在此处重新创建此页面上的价格生成器（您必须向下滚动一点，它会说“让我们开始吧”）。 单击两个复选框中的任何一个时，我无法弄清楚如何更改顶部的显示价格。 这是我目前拥有的 codepen： code 。 任何帮助将不胜感激！！

    <div class="flex justify-between items-start flex-wrap -m-16">
        <div class="w-full md:w-1/2 p-16 flex-grow-0 flex-shrink-0 flex justify-center items-center">
            <div class="flex-grow flex-shrink">
                <h4 class="text-24 text-center font-semibold">iEverydayCARE™ with Hospitalization</h4> 
                <ul class="list-reset text-center mt-32 max-w-260 mx-auto">
                    <li class="pb-8 whitespace-pre-line">National Direct Primary Care
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">24-Hour Concierge
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">Lab Benefits
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">Prescription Drug Program
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">Chiropractic Office Visits
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">Vision, Dental &amp; Mental Health Discounts
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">Referral and Care Navigation
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">Open Network
                        <!---->
                    </li>
                    <li class="pb-8 whitespace-pre-line">Medical Cost Share<sup>1</sup>
                    </li>
                    <li class="pb-8 whitespace-pre-line">$3000 Annual out-of-pocket Maximum Per Family<sup>*/†</sup>
                    </li>
                    <li class="pb-8 whitespace-pre-line">$1000 per condition member responsibility<sup>*</sup>
                    </li>
                </ul>
            </div>
        </div>
        <div class="w-full md:w-1/2 p-16 flex-grow-1 flex-shrink-1 text-gray-dark">
            <div>
                <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"><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">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="m" onclick="changeMyself()">
                                    <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="ms" onclick="changeMS()">
                                    <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="mc" onclick="changeMC()">
                                    <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="mf" onclick="changeMF()">
                                    <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="my-4 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="smoker()">
                                <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 rounded-18 px-16 pb-16 pt-48 -mt-32">
                    <label class="check_box">
                        <input type="checkbox" name="sayNoToPlus" class="bg-white" id="sayNoToPlus" onclick="sayNoToPlus()">
                        <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-left md:text-center">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"><a href="/uploads/i_Everyday_CARE_with_Hospitalization_88f13de61a.pdf" target="_blank" rel="nofollow" class="btn_sqr_trans_white block mt-16 text-center">Benefit Summary</a>
        </div>
    </div>
</div>

function changeMyself() {
  var myself = document.getElementById('m').checked;

  if (myself === true) {
    document.getElementById('price').innerHTML = '319';
  }
}
function changeMS() {
var myself_spouse = document.getElementById('ms').checked;

  if (myself_spouse === true) {
    document.getElementById('price').innerHTML = '639';
  }
  else {
    document.getElementById('price').innerHTML = '394';
  }
}
function changeMC() {
var myself_children = document.getElementById('mc').checked;

  if (myself_children === true) {
    document.getElementById('price').innerHTML = '639';
  }
  else {
    document.getElementById('price').innerHTML = '394';
  }
}

function changeMF() {
var myself_family = document.getElementById('mf').checked;

  if (myself_family === true) {
    document.getElementById('price').innerHTML = '899';
  }
  else {
    document.getElementById('price').innerHTML = '394';
  }
}

function smoker() {
  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.';
  }
  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 sayNoToPlus() {
  var sayNoToPlus = document.getElementById('sayNoToPlus').checked;
  if (sayNoToPlus === true) {
    document.getElementById('smoker').disabled = true;
    document.getElementById('myselfSmoke').innerHTML = '$125/mo.';
    document.getElementById('msSmoke').innerHTML = '$240/mo.';
    document.getElementById('mcSmoke').innerHTML = '$250/mo.';
    document.getElementById('mfSmoke').innerHTML = '$365/mo.';
    var changeMF = document.getElementById('mf').value;
    changeMF = '1000';
    console.log(changeMF);
    var myself = document.getElementById('m').checked;
    console.log(myself);
    if (myself === false){
      document.getElementById('price').innerHTML = changeMF;
    }
  }
  
   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.';
  }
}

Answer 1

我想到了！！ 呜！！

function setPrice() {
  var radios = document.getElementsByName("radio");
  var selected = Array.from(radios).find(radio => radio.checked);
  document.getElementById('price').innerHTML = selected.value;
}

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 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('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.';
  }
}


function smoker() {
  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.';
  }
  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.';
  }
}