好胖快餐在线

不必问山谷

于 2022-12-01 22:09:53 发布

阅读量542

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/li_xinyide/article/details/128139727

版权

<!DOCTYPE html>

<html>

<head>

//css样式

<style type="text/css">

body {

padding: 0px;

margin: 165px 0px 0px 160px;

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

color: #ffffff;

background: #000000 url(bg2.jpg) no-repeat;

}

body > div {

margin: 5px;

padding: 0px;

}

div.detail {

display: none;

margin: 3px 0px 2px 15px;

}

div#totalPrice {

padding: 10px 0px 0px 280px;

margin-top: 15px;

width: 85px;

border-top: 1px solid #ffffff;

}

input {

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

}

input.quantity {

border: 1px solid #cccccc;

background: #3f1415;

color: #ffffff;

width: 15px;

text-align: center;

margin: 0px 0px 0px 210px;

}

</style>

</head>

<body>
    <div>
      1. <input type="checkbox" id="LiangCaiCheck" /><label for="LiangCaiCheck"
        >凉菜</label
      >
      <span price="0.5"
        ><input type="text" class="quantity" /> ￥<span></span>元</span
      >
      <div class="detail">
        <label
          ><input type="radio" name="LiangCai" checked="checked" />拍黄瓜</label
        >
        <label><input type="radio" name="LiangCai" />香油豆角</label>
        <label><input type="radio" name="LiangCai" />特色水豆腐</label>
        <label><input type="radio" name="LiangCai" />香芹醋花生</label>
      </div>
    </div>

    <div>
      2. <input type="checkbox" id="SuCaiCheck" /><label for="SuCaiCheck"
        >素菜</label
      >
      <span price="1"
        ><input type="text" class="quantity" /> ￥<span></span>元</span
      >
      <div class="detail">
        <label
          ><input type="radio" name="SuCai" checked="checked" />虎皮青椒</label
        >
        <label><input type="radio" name="SuCai" />醋溜土豆丝</label>
        <label><input type="radio" name="SuCai" />金勾豆芽</label>
      </div>
    </div>

    <div>
      4. <input type="checkbox" id="SoupCheck" /><label for="SoupCheck"
        >热汤</label
      >
      <span price="1.5"
        ><input type="text" class="quantity" /> ￥<span></span>元</span
      >
      <div class="detail">
        <label
          ><input
            type="radio"
            name="Soup"
            checked="checked"
          />西红柿鸡蛋汤</label
        >
        <label><input type="radio" name="Soup" />南瓜汤</label>
      </div>
    </div>

//jquery代码

<script src="jquery-3.6.0.min.js"></script>

<script type="text/javascript">

$(function () {

// 1.显示/隐藏子菜单：当用户修改复选框的选择状态时，根据选中情况对子菜单进行显示/隐藏

$(":checkbox").click(function () {

var oChecked = this.checked;

$(this)

.parent()

.find(".detail")

.css("display", oChecked ? "block" : "none");

$(this)

.parent()

.find("input[type=text]")

.attr("disabled", !oChecked)

.val(1)

.change()

.each(function () {

if (oChecked) this.focus();

});

});

$("span[price] input[type=text]").change(function () {

$(this)

.parent()

.find("span")

.html($(this).val() * $(this).parent().attr("price"));

addTotal();

});

$("span[price] input[type=text]")

.attr({

disabled: true,

value: 1,

maxlength: 2,

})

.change();

//计算总价格

function addTotal() {

var totalPrice = 0;

$(":checkbox:checked").each(function () {

var num = parseInt(

$(this).parent().find("input[type=text]").val()

);

var univalent = parseFloat(

$(this).parent().find("span[price]").attr("price")

);

totalPrice = totalPrice + num * univalent;

console.log(num);

});

$("#totalPrice").html("合计￥" + totalPrice + "元 ");

}

});

</script>

</body>

</html>

不必问山谷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
好胖快餐在线

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&gt
复制链接

扫一扫