沃梦达 / 编程问答 / 前端问题 / 正文

价格取决于无线电输入的选择

前端问题
2022-09-28

price depend on selection of radio input(价格取决于无线电输入的选择)

本文介绍了价格取决于无线电输入的选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试了，但在此之后无法获得，因此请帮助我完成此操作。

我想设置成人价格，如果选择私人，则有亚视是100，没有亚视是10

但如果选择共享，则使用ATV时为50，不使用ATV时为5 对于儿童，如果选择了Private，则有ATV的为50，没有ATV的为5 但如果选择共享，则带ATV的为25，不带3的 数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假"> 

function calculateTotal() {
        const privateAdultPrice = 0;
        const sharedAdultPrice = 0;
        const privateChildrenPrice = 0;
        const sharedChildrenPrice = 0;

        const withAtvAdultPrice = 100;
        const withAtvChildrenPrice = 80;

        const noAtvPrice = 10;

        const adults = +document.querySelector('#adults').value;
        const children = +document.querySelector('#children').value;

        const isPrivate = document.getElementById('private').checked;
        const isWithAtv = document.getElementById('withatv').checked;        

        const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
        const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
        const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
        const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice;      

        const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
        const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)

        return adultPrice + childrenPrice;                  

      }
      function updateTotal() {
        const total = calculateTotal();
        console.log(total);
        document.querySelector('#totalPrice').innerHTML = total;
      }

      function increaseCount(e, el) {
        var input = el.previousElementSibling;
        var value = parseInt(input.value, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        input.value = value;
        updateTotal();
      }

      function decreaseCount(e, el) {
        var input = el.nextElementSibling;
        var value = parseInt(input.value, 10);
        if (value > 1) {
          value = isNaN(value) ? 0 : value;
          value--;
          input.value = value;
        }
        updateTotal();
      }

      function decreaseCount2(e, el) {
        var input = el.nextElementSibling;
        var value = parseInt(input.value, 10);
        if (value > 0) {
          value = isNaN(value) ? 0 : value;
          value--;
          input.value = value;
        }
        updateTotal();
      }

      var MainImg = document.getElementById('MainImg');
      var smallimg = document.getElementsByClassName('small-img');

      smallimg[0].onclick = function () {
        MainImg.src = smallimg[0].src;
      };
      smallimg[1].onclick = function () {
        MainImg.src = smallimg[1].src;
      };
      smallimg[2].onclick = function () {
        MainImg.src = smallimg[2].src;
      };
      smallimg[3].onclick = function () {
        MainImg.src = smallimg[3].src;
      };
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <style>
      .small-img-group {
        display: flex;
        justify-content: space-between;
      }

      .small-img-col {
        flex-basis: 24%;
        cursor: pointer;
      }

      .counter1 {
        float: left;
        display: flex;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: hidden;
      }

      .counter2 {
        float: left;
        display: flex;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-left: 15px;
      }

      .up,
      .down {
        display: inline-block;
        color: rgb(0, 0, 0);
        font-size: 20px;
        margin: 1px 1px;
        cursor: pointer;
        width: 15px;
        line-height: 14px;
        height: 16px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #000;
        user-select: none;
      }

      .up:hover,
      .down:hover {
        color: #fd0b3f;
        text-align: center;
      }

      .adults {
        padding-right: 5px;
      }

      .children {
        padding-right: 5px;
      }

      input {
        appearance: none;
        height: 21px;
        text-align: center;
        width: 42px;
        line-height: 24px;
        font-size: 15px;
        border-radius: 5px;
      }

      .container {
        display: flex;
        width: 2000px
      }

      input[type='radio'] {
        display: none;
      }

      label[for='private'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
        margin-right: 10px;
      }

      label[for='shared'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
      }
      label[for='withatv'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
        margin-right: 10px;
      }

      label[for='withoutatv'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
      }

      input[type='radio']:checked + label {
        background-color: orangered;
        color: white;
      }

      input[type='radio']:checked + label:before {
        height: 16px;
        width: 16px;
        border: 10px solid white;
        background-color: orangered;
      }
    </style>
  </head>

  <body>
    <section class="container sproduct my-5 pt-5">
      <div class="row mt-5">
        <div class="col-lg-5 col-md-12 col-12">
          <img
            class="img-fluid w-100 pb-1"
            src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
            alt=""
            id="MainImg"
            width="450"
          />

          <div class="small-img-group">
            <div class="small-img-col">
              <img
                src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
            <div class="small-img-col">
              <img
                src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
            <div class="small-img-col">
              <img
                src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
            <div class="small-img-col">
              <img
                src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-12 col-12">
          <h6>Home / Morning Safari</h6>
          <h3>Morning Safari</h3>
          <h2><label> Total:</label><label id="totalPrice"class="total Price"></label></h2>
          <div class="counter1">
            <label class="Adults">Adults</label>
            <div class="down" onclick="decreaseCount(event, this)">-</div>
            <input id="adults" type="text" value="1" readonly />
            <div class="up" onclick="increaseCount(event, this)">+</div>
          </div>
          <div class="counter2">
            <label class="Children">Children</label>
            <div class="down" onclick="decreaseCount2(event, this)">-</div>
            <input id="children" type="text" value="0" readonly />
            <div class="up" onclick="increaseCount(event, this)">+</div>
          </div>
          <div class="container" style="padding-left: 0; padding-top: 5px">
            <div>
              <input
                type="radio"
                name="occupancy"
                id="private"
                checked="checked"
                onclick="updateTotal()"
              />
              <label for="private">Private</label>
              <input
                type="radio"
                name="occupancy"
                id="shared"
                onclick="updateTotal()"
              />
              <label for="shared">Shared</label>
            </div>
            <div>
              <input
                type="radio"
                name="atv"
                id="withatv"
                checked="checked"
                onclick="updateTotal()"
              />
              <label for="withatv">With ATV</label>
              <input
                type="radio"
                name="atv"
                id="withoutatv"
                onclick="updateTotal()"
              />
              <label for="withoutatv">Without ATV</label>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script>
      
    </script>
  </body>
</html>

嗨 我试过了，但在此之后无法获得，因此请帮助我处理此问题。

我想设置成人价格，如果选择私人，则有亚视的是100，没有亚视的是10

但如果选择共享，则使用ATV时为50，不使用ATV时为5

对于儿童，如果选择了Private，则有ATV的为50，没有ATV的为5 但如果选择共享，则带ATV的为25，不带3的

推荐答案

现在，您的价格取决于条件。

因此，计算方法略有不同。翻译您的话，在JS代码中应该是这样的：

const adultTripPrice = isPrivate && isWithAtv ? 100 : isPrivate ? 10 : isWithAtv ? 50 : 5;
const childrenTripPrice = isPrivate && isWithAtv ? 50 : isPrivate ? 5 : isWithAtv ? 25 : 3;

const adultPrice = adults * (adultTripPrice)
const childrenPrice = children * (childrenTripPrice)

它针对成人进行评估

  • isPrivate和isWithATV然后100
  • isPrivate(但不是isWithATV)然后10
  • isWithATV(但不是isPrivate)则为50
  • 不是isPrivate也不是isWithATV然后是5。

，然后将该数字乘以成人数。(同样的逻辑也适用于孩子)

更新后的代码如下所示： 
function calculateTotal() {
        const privateAdultPrice = 0;
        const sharedAdultPrice = 0;
        const privateChildrenPrice = 0;
        const sharedChildrenPrice = 0;

        const withAtvAdultPrice = 100;
        const withAtvChildrenPrice = 80;

        const noAtvPrice = 10;

        const adults = +document.querySelector('#adults').value;
        const children = +document.querySelector('#children').value;

        const isPrivate = document.getElementById('private').checked;
        const isWithAtv = document.getElementById('withatv').checked;        

        const adultTripPrice = isPrivate && isWithAtv ? 100 : isPrivate ? 10 : isWithAtv ? 50 : 5;
        const childrenTripPrice = isPrivate && isWithAtv ? 50 : isPrivate ? 5 : isWithAtv ? 25 : 3;
        const adultPrice = adults * (adultTripPrice)
        const childrenPrice = children * (childrenTripPrice)

        return adultPrice + childrenPrice;                  

      }
      function updateTotal() {
        const total = calculateTotal();
        console.log(total);
        document.querySelector('#totalPrice').innerHTML = total;
      }

      function increaseCount(e, el) {
        var input = el.previousElementSibling;
        var value = parseInt(input.value, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        input.value = value;
        updateTotal();
      }

      function decreaseCount(e, el) {
        var input = el.nextElementSibling;
        var value = parseInt(input.value, 10);
        if (value > 1) {
          value = isNaN(value) ? 0 : value;
          value--;
          input.value = value;
        }
        updateTotal();
      }

      function decreaseCount2(e, el) {
        var input = el.nextElementSibling;
        var value = parseInt(input.value, 10);
        if (value > 0) {
          value = isNaN(value) ? 0 : value;
          value--;
          input.value = value;
        }
        updateTotal();
      }

      var MainImg = document.getElementById('MainImg');
      var smallimg = document.getElementsByClassName('small-img');

      smallimg[0].onclick = function () {
        MainImg.src = smallimg[0].src;
      };
      smallimg[1].onclick = function () {
        MainImg.src = smallimg[1].src;
      };
      smallimg[2].onclick = function () {
        MainImg.src = smallimg[2].src;
      };
      smallimg[3].onclick = function () {
        MainImg.src = smallimg[3].src;
      };
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <style>
      .small-img-group {
        display: flex;
        justify-content: space-between;
      }

      .small-img-col {
        flex-basis: 24%;
        cursor: pointer;
      }

      .counter1 {
        float: left;
        display: flex;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: hidden;
      }

      .counter2 {
        float: left;
        display: flex;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-left: 15px;
      }

      .up,
      .down {
        display: inline-block;
        color: rgb(0, 0, 0);
        font-size: 20px;
        margin: 1px 1px;
        cursor: pointer;
        width: 15px;
        line-height: 14px;
        height: 16px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #000;
        user-select: none;
      }

      .up:hover,
      .down:hover {
        color: #fd0b3f;
        text-align: center;
      }

      .adults {
        padding-right: 5px;
      }

      .children {
        padding-right: 5px;
      }

      input {
        appearance: none;
        height: 21px;
        text-align: center;
        width: 42px;
        line-height: 24px;
        font-size: 15px;
        border-radius: 5px;
      }

      .container {
        display: flex;
        width: 2000px
      }

      input[type='radio'] {
        display: none;
      }

      label[for='private'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
        margin-right: 10px;
      }

      label[for='shared'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
      }
      label[for='withatv'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
        margin-right: 10px;
      }

      label[for='withoutatv'] {
        position: relative;
        color: orangered;
        font-size: 20px;
        border: 2px solid orangered;
        border-radius: 5px;
        align-items: left;
        display: flex;
        cursor: pointer;
      }

      input[type='radio']:checked + label {
        background-color: orangered;
        color: white;
      }

      input[type='radio']:checked + label:before {
        height: 16px;
        width: 16px;
        border: 10px solid white;
        background-color: orangered;
      }
    </style>
  </head>

  <body>
    <section class="container sproduct my-5 pt-5">
      <div class="row mt-5">
        <div class="col-lg-5 col-md-12 col-12">
          <img
            class="img-fluid w-100 pb-1"
            src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
            alt=""
            id="MainImg"
            width="450"
          />

          <div class="small-img-group">
            <div class="small-img-col">
              <img
                src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
            <div class="small-img-col">
              <img
                src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
            <div class="small-img-col">
              <img
                src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
            <div class="small-img-col">
              <img
                src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg"
                width="100%"
                class="small-img"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-12 col-12">
          <h6>Home / Morning Safari</h6>
          <h3>Morning Safari</h3>
          <h2><label> Total:</label><label id="totalPrice"class="total Price"></label></h2>
          <div class="counter1">
            <label class="Adults">Adults</label>
            <div class="down" onclick="decreaseCount(event, this)">-</div>
            <input id="adults" type="text" value="1" readonly />
            <div class="up" onclick="increaseCount(event, this)">+</div>
          </div>
          <div class="counter2">
            <label class="Children">Children</label>
            <div class="down" onclick="decreaseCount2(event, this)">-</div>
            <input id="children" type="text" value="0" readonly />
            <div class="up" onclick="increaseCount(event, this)">+</div>
          </div>
          <div class="container" style="padding-left: 0; padding-top: 5px">
            <div>
              <input
                type="radio"
                name="occupancy"
                id="private"
                checked="checked"
                onclick="updateTotal()"
              />
              <label for="private">Private</label>
              <input
                type="radio"
                name="occupancy"
                id="shared"
                onclick="updateTotal()"
              />
              <label for="shared">Shared</label>
            </div>
            <div>
              <input
                type="radio"
                name="atv"
                id="withatv"
                checked="checked"
                onclick="updateTotal()"
              />
              <label for="withatv">With ATV</label>
              <input
                type="radio"
                name="atv"
                id="withoutatv"
                onclick="updateTotal()"
              />
              <label for="withoutatv">Without ATV</label>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script>
      
    </script>
  </body>
</html>

这篇关于价格取决于无线电输入的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：价格取决于无线电输入的选择

上一篇： 根据没有按钮的选择计算价格
下一篇： 纯组件中的反应本机更新FlatList数据

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2