用html javascript编程列出多个复选框选项，实现计算选中的总计，实现全选、反选、不选按钮功能

最后效果：

点总计上面复框选中的水果会计算总价格
点全选所有水果都会被选中
点反选没选中的水果被选中
点不选选中的水果被取消选中

我不知道这些按钮的javascript要怎么设计


这里是HTML和JavaScript代码:
HTML:
html
<div id="fruits">
  <input type="checkbox" name="fruits" value="apple"> Apple 
  <input type="checkbox" name="fruits" value="orange"> Orange 
  <input type="checkbox" name="fruits" value="banana"> Banana
</div>
<button id="selectAll">全选</button> 
<button id="selectInverse">反选</button>
<button id="selectNone">不选</button>
<p id="totalPrice">总价: <span>0</span></p>
JavaScript:
js
const fruits = document.getElementById("fruits");
const selectAllBtn = document.getElementById("selectAll");
const selectInverseBtn = document.getElementById("selectInverse"); 
const selectNoneBtn = document.getElementById("selectNone");
const totalPriceSpan = document.getElementById("totalPrice").querySelector("span");
let totalPrice = 0;

selectAllBtn.addEventListener("click", () => {
  for (let fruit of fruits.children) {
    if (fruit.type === "checkbox") {
      fruit.checked = true;
    }
  }
  calculateTotalPrice();
});

selectInverseBtn.addEventListener("click", () => {
  for (let fruit of fruits.children) {
    if (fruit.type === "checkbox") {
      fruit.checked = !fruit.checked; 
    }
  }
  calculateTotalPrice();
});  

selectNoneBtn.addEventListener("click", () => {
  for (let fruit of fruits.children) {
    if (fruit.type === "checkbox") {
      fruit.checked = false; 
    }
  }
  totalPrice = 0;
  totalPriceSpan.textContent = totalPrice; 
});  

function calculateTotalPrice() {
  totalPrice = 0;
  for (let fruit of fruits.children) {
    if (fruit.checked && fruit.type === "checkbox") {
      totalPrice += parseInt(fruit.value); 
    }
  }
  totalPriceSpan.textContent = totalPrice; 
}
这段代码实现了点击三个按钮(全选、反选、不选)来选中和取消选中复选框,并计算选中复选框的总价格

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7765106
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：javascript实现水果抽奖机
除此之外, 这篇博客: JavaScript流程控制-分支中的 5.3、查询水果案例 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var fruit = prompt('请输入水果：');
        switch(fruit){
            case '苹果':
                alert('3.5元/斤');
                break;
            case '香蕉':
                alert('2.5元/斤');
                break;
            case '草莓':
                alert('10元/斤');
                break;
            default:
                alert('没有此水果');
        }
    </script>
</head>
<body>
    
</body>
</html>

您还可以看一下李广川老师的Javascript水墨特效照片生成平台前端组件化项目实战课程课程中的课程介绍小节, 巩固相关知识点

以下回答由chatgpt基于相关博客总结生成:

我们可以使用HTML和JavaScript来编写多个复选框，并计算选中的总价值，同时添加全选、反选和不选按钮功能。

首先，我们需要在HTML中创建多个复选框，可以使用input标签的type属性设置为checkbox实现。我们需要为每个复选框设置一个value属性，表示该选项的价格。例如：

<input type="checkbox" name="option1" value="10">Option 1
<input type="checkbox" name="option2" value="20">Option 2
<input type="checkbox" name="option3" value="30">Option 3

然后，我们可以使用JavaScript来计算选中的总价值。我们可以使用document.getElementsByName方法来获取所有的复选框，然后遍历每个复选框，判断是否被选中，如果被选中，则将其value值加入总价值中。最后将总价值输出到页面中。代码如下：

function calculate() {
  var options = document.getElementsByName("option");
  var totalPrice = 0;
  for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
      totalPrice += parseInt(options[i].value);
    }
  }
  document.getElementById("totalPrice").innerHTML = "Total Price: $" + totalPrice;
}

在HTML中，我们可以添加一个按钮来触发calculate函数。例如：

<button onclick="calculate()">Calculate Total Price</button>

现在我们已经能够计算选中的总价值了。接下来，我们可以添加全选、反选和不选按钮功能。为了实现选中所有复选框，我们需要获取所有的复选框，并将它们的checked属性设置为true。反选和不选的实现方式与此类似。代码如下：

function selectAll() {
  var options = document.getElementsByName("option");
  for (var i = 0; i < options.length; i++) {
    options[i].checked = true;
  }
}

function invertSelection() {
  var options = document.getElementsByName("option");
  for (var i = 0; i < options.length; i++) {
    options[i].checked = !options[i].checked;
  }
}

function clearSelection() {
  var options = document.getElementsByName("option");
  for (var i = 0; i < options.length; i++) {
    options[i].checked = false;
  }
}

我们可以在HTML中添加按钮来调用这些函数，例如：

<button onclick="selectAll()">Select All</button>
<button onclick="invertSelection()">Invert Selection</button>
<button onclick="clearSelection()">Clear Selection</button>

最后，我们将所有代码整合在一起，并将其放在一个HTML文件中。完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Checkbox Example</title>
</head>
<body>
  <input type="checkbox" name="option" value="10">Option 1
  <input type="checkbox" name="option" value="20">Option 2
  <input type="checkbox" name="option" value="30">Option 3
  <br>
  <button onclick="calculate()">Calculate Total Price</button>
  <button onclick="selectAll()">Select All</button>
  <button onclick="invertSelection()">Invert Selection</button>
  <button onclick="clearSelection()">Clear Selection</button>
  <br>
  <div id="totalPrice"></div>
  <script>
    function calculate() {
      var options = document.getElementsByName("option");
      var totalPrice = 0;
      for (var i = 0; i < options.length; i++) {
        if (options[i].checked) {
          totalPrice += parseInt(options[i].value);
        }
      }
      document.getElementById("totalPrice").innerHTML = "Total Price: $" + totalPrice;
    }

    function selectAll() {
      var options = document.getElementsByName("option");
      for (var i = 0; i < options.length; i++) {
        options[i].checked = true;
      }
    }

    function invertSelection() {
      var options = document.getElementsByName("option");
      for (var i = 0; i < options.length; i++) {
        options[i].checked = !options[i].checked;
      }
    }

    function clearSelection() {
      var options = document.getElementsByName("option");
      for (var i = 0; i < options.length; i++) {
        options[i].checked = false;
      }
    }
  </script>
</body>
</html>