根据单选按钮和复选框选择显示不同的文本

Question

我正在尝试重新创建一小段代码（当您向下滚动到价格选择器/“开始”选择时，可以在此处找到该示例）。 当我点击“是的，会员使用烟草”复选框时，我试图让主要价格发生变化，然后当它被取消选中时，我希望它 go 回到原来的价格。 我非常接近，但我似乎无法找到将它们联系在一起的最后一点代码。 任何帮助，将不胜感激！

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

 <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>

Answer 1

我使用另一种方法来实现相同的目标。 我相信必须有另一种更好的方法来做到这一点，但我正在使用for loop来循环价格并更改其innerHtml以及单选按钮的value 。 HTML 代码与您提供的代码不同，但逻辑相同。 如果我错了，请纠正我！

每次单击单选按钮时，它都会触发updatePrice function 并传入调用它的元素。 然后 function 将更新价格。

当复选框被点击时，它会调用inc_dec_price function，它会检查复选框是否被选中，然后增加或减少价格。

 function inc_dec_price(){ var prices = document.getElementsByClassName('prices'); var radios = document.getElementsByName('opt'); if(document.getElementById('smoker').checked){ for(var i = 0; i < prices.length; i++){ prices[i].innerHTML = parseInt(prices[i].innerHTML) + 75 radios[i].value = prices[i].innerHTML; } } else { for(var i = 0; i < prices.length; i++){ prices[i].innerHTML -= 75 radios[i].value = prices[i].innerHTML } } updatePrice(Array.from(radios).find(e => e.checked)) } function updatePrice(element){ document.getElementById('to_pay').innerHTML = element.value }

 <h1>$ <span id="to_pay">319</span></h1> <ul> <li><input type="radio" onclick="updatePrice(this);" value="319" id="opt-0" name="opt" checked><label for="opt-0">Myself $ <span class="prices">319</span>/month</label></li> <li><input type="radio" onclick="updatePrice(this);" value="639" id="opt-1" name="opt"><label for="opt-1">Myself + Spouse $ <span class="prices">639</span>/month</label></li> <li><input type="radio" onclick="updatePrice(this);" value="639" id="opt-2" name="opt"><label for="opt-2">Myself + Children$ <span class="prices">639</span>/month</label></li> <li><input type="radio" onclick="updatePrice(this);" value="899" id="opt-3" name="opt"><label for="opt-3">Myself + Family $ <span class="prices">899</span>/month</label></li> </ul> <input type="checkbox" name="smoker" id="smoker" onclick="inc_dec_price()"><label for="smoker">Yes, A member uses tobacco ($75 surcharge) </label>

Answer 2

这是您可以检查的解决方案。 我改变如果条件

if (smoker === true) {
         
       document.getElementById('price').innerHTML = '394';
        console.log(document.getElementById('price').innerHTML);

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

    }

 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; console.log("smoker",smoker); if (smoker === true) { document.getElementById('price').innerHTML = '394'; console.log(document.getElementById('price').innerHTML); } else { document.getElementById('m').value = '319'; console.log(document.getElementById('m').value); } if (myself === true && smoker === false) { document.getElementById('price').innerHTML = '319'; 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 && smoker === false) { document.getElementById('price').innerHTML = '639'; 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 && smoker === false) { document.getElementById('price').innerHTML = '639'; document.getElementById('link').href = "https://www.1enrollment.com/order/checkout.cfm?id=575916&pdid=30894&benefitid=117&bSmoker=0&step=2&periodid=1"; } else if(MF===true && smoker === false) { document.getElementById('price').innerHTML = '899'; document.getElementById('link').href = "https://www.1enrollment.com/order/checkout.cfm?id=575916&pdid=30894&benefitid=146&bSmoker=0&step=2&periodid=1"; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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 id="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"> <a id="link"></a> <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>