Display different text based on radio button AND checkbox selection

I am trying to recreate a small snippet of code (the example can be found here when you scroll down to the price selector/"Get Started" selection). I’m trying to have the main price change when I click on the "Yes, a member uses tobacco" checkbox, and then when it is unchecked, I want it to go back to the original price. I’m very close, but I just can’t seem to find the last bit of code that ties it all together. Any help would be appreciated!

HTML:

    <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" onclick="setPrice()" checked="true"> 
               <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" 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" 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" 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="setPrice()"> 
            <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>

Javascript:

   function setPrice() {
    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;

    var smoker = document.getElementById('smoker').checked;
    if (smoker === true) {
        document.getElementById('m').value = '394';
        console.log(document.getElementById('m').value);

    } else {
        document.getElementById('m').value = '319';
        console.log(document.getElementById('m').value);

    }
    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";
    }

}

5 thoughts on “Display different text based on radio button AND checkbox selection”

  1. If you want the main value to change, why not target the price span’s innerHTML?

      var smoker = document.getElementById('smoker').checked
      if (smoker === false) {
        document.getElementById('price').innerHTML = '319';
        console.log(document.getElementById('m').value);
    
      } else {
        document.getElementById('price').innerHTML = '349';
        console.log(document.getElementById('m').value);
    
      }
    

    Your code above is targeting your input value.

    Run the snippet below.

    function setPrice() {
      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;
    
      var smoker = document.getElementById('smoker').checked
      if (smoker === false) {
        document.getElementById('price').innerHTML = '319';
        console.log(document.getElementById('price').innerHTML);
    
      } else {
        document.getElementById('price').innerHTML = '349';
        console.log(document.getElementById('price').innerHTML);
    
      }
      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";
      }
    
    }
    <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" onclick="setPrice()" checked="true"> 
                   <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" 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" 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" 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="setPrice()"> 
                <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>
    Reply

Leave a Comment