jq、js选择物品实时计算价格

最新推荐文章于 2023-06-19 20:23:45 发布

海螺呢

最新推荐文章于 2023-06-19 20:23:45 发布

阅读量1.6k

点赞数 1

分类专栏： jq javascript

本文链接：https://blog.youkuaiyun.com/qq_39548647/article/details/80453371

版权

javascript 同时被 2 个专栏收录

17 篇文章

订阅专栏

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  </head>

  <body>
    <div>
      <input type="radio" name="carType" id="" value="100" />
      <input type="radio" name="carType" id="" value="200" />
      <input type="radio" name="carType" id="" value="300" />
      <input type="radio" name="carType" id="" value="400" />
    </div>
    <div>
      <input type="radio" name="carColor" id="" value="100" />
      <input type="radio" name="carColor" id="" value="200" />
      <input type="radio" name="carColor" id="" value="300" />
      <input type="radio" name="carColor" id="" value="400" />
    </div>
    <div>
      <input type="radio" name="carPz" id="carPz" value="100" />
      <input type="radio" name="carPz" id="carPz" value="200" />
      <input type="radio" name="carPz" id="carPz" value="300" />
      <input type="radio" name="carPz" id="carPz" value="400" />
    </div>
    <div>
      <input type="radio" name="carXp" id="" value="100" />
      <input type="radio" name="carXp" id="" value="200" />
      <input type="radio" name="carXp" id="" value="300" />
      <input type="radio" name="carXp" id="" value="400" />
    </div>
    <button class="math">计算</button>
    <div style="border: 1px solid black; height: 20px;">
      <span>价格: </span> <span class="priceLine"> 0 </span>
    </div>
    <script type="text/javascript">
      $("input").attr("onclick", "mathPrice()");
      var carType = undefined;
      var carColor = undefined;
      var carPz = undefined;
      var carXp = undefined;

      function mathPrice() {
        $(".priceLine").text("");
        //获取checked项的value值
        carType = $('input[name="carType"]:checked').val();
        carColor = $('input[name="carColor"]:checked').val();
        carPz = $('input[name="carPz"]:checked').val();
        carXp = $('input[name="carXp"]:checked').val();
        //判断并做兼容处理并转化为数字
        var carTypePrice = carType == undefined ? 0 : carType * 1;
        var carColorPrice = carColor == undefined ? 0 : carColor * 1;
        var carPzPrice = carPz == undefined ? 0 : carPz * 1;
        var carXpPrice = carXp == undefined ? 0 : carXp * 1;
        //总价格相加
        var allPrice = carTypePrice + carColorPrice + carPzPrice + carXpPrice;
        $(".priceLine").text(allPrice);
      }
      //点击按钮提交的总价
      $(".math").on("click", function () {
        if (
          carType == undefined ||
          carColor == undefined ||
          carPz == undefined ||
          carXp == undefined
        ) {
          alert("请全部选择后提交！");
        } else {
          var carPrice = $(".priceLine").text();
          alert(carPrice);
        }
      });
    </script>
  </body>
</html>