使用 JavaScript 获取复选框中值的最小值

Question

当我选择了 10 个以上的项目时，我想使用 JavaScript 获得最小值。但是我无法根据我的代码得到结果。我认为错误在 "price[i]" 中，但我不知道如何正确编写它。这是我的代码。获得最小值的正确方法是什么？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function getprice()
    {
        var total=0.00,i,count=0,min=0;

        for(i=0; i<document.frm1.item.length; i++)
        {
            if(document.frm1.item[i].checked)
                {
                    total=total+parseInt(document.frm1.item[i].value);
                    count=count+1;
                }
        }
        document.getElementById("totalprice").innerHTML="Total Price : RM "+ total.toFixed(2);
        document.getElementById("totalitem").innerHTML="Total item: "+count;


        if(total>=300 && count>=10)
        {
            for(i=0; i<document.frm1.item.length; i++)
            {
                if(document.frm1.item[i].checked)
                {
                    price[i]=document.frm1.item[i].value;

                    if(price[i]<min)
                        min=price[i];
                }
            }

            document.getElementById("smallestp").innerHTML="Smallest price : RM "+ min.toFixed(2);
        }
    }

</script>
</head>
<body>
<form name="frm1">

<input type="checkbox" name="item" value="100"/>Pan     RM 100</br>
<input type="checkbox" name="item" value="50"/>Fork     RM 50</br>
<input type="checkbox" name="item" value="200"/>Stove   RM 200</br>
<input type="checkbox" name="item" value="10"/>Pen      RM 10</br>
<input type="checkbox" name="item" value="60"/>Mouse    RM 60</br>
<input type="checkbox" name="item" value="40"/>Keyboard RM 40</br>
<input type="checkbox" name="item" value="30"/>Glue     RM 30</br>
<input type="checkbox" name="item" value="210"/>Speaker RM 210</br>
<input type="checkbox" name="item" value="300"/>Case    RM 300</br>
<input type="checkbox" name="item" value="80"/>Cable    RM 80</br>
<input type="checkbox" name="item" value="110"/>Extention   RM 110</br>
<input type="checkbox" name="item" value="400"/>Redmi   RM400</br>

<p><input type="button" name="subbtn" value="Send" onclick="getprice();"/></p><br/>

<p id="totalprice"></p>
<p id="totalitem"></p>
<p id="newupdatep"></p>
<p id="smallestp"></p>


</form>
</body>
</html>

Answer 1

我使用 Array#filter 过滤所有选中的复选框，然后使用 Array#map 将其映射以获取每个选中复选框的值。然后 - 使用 Math.min.apply 获得最低值。

function getprice() {
  var total = 0.00,
    i, count = 0,
    min = 0;

  for (i = 0; i < document.frm1.item.length; i++) {
    if (document.frm1.item[i].checked) {
      total = total + parseInt(document.frm1.item[i].value);
      count = count + 1;
    }
  }
  document.getElementById("totalprice").innerHTML = "Total Price : RM " + total.toFixed(2);
  document.getElementById("totalitem").innerHTML = "Total item: " + count;
  var checked = document.getElementsByName('item')

  if (total >= 300 && count >= 10) {
    var elems = Array.from(checked).filter(v => v.checked).map(c => Number(c.value));
    var cheapest = Math.min.apply([], elems);
    document.getElementById("smallestp").innerHTML = "Smallest price : RM " + cheapest.toFixed(2);
  }
}

<form name="frm1">

  <input type="checkbox" name="item" value="100" />Pan RM 100</br>
  <input type="checkbox" name="item" value="50" />Fork RM 50</br>
  <input type="checkbox" name="item" value="200" />Stove RM 200</br>
  <input type="checkbox" name="item" value="10" />Pen RM 10</br>
  <input type="checkbox" name="item" value="60" />Mouse RM 60</br>
  <input type="checkbox" name="item" value="40" />Keyboard RM 40</br>
  <input type="checkbox" name="item" value="30" />Glue RM 30</br>
  <input type="checkbox" name="item" value="210" />Speaker RM 210</br>
  <input type="checkbox" name="item" value="300" />Case RM 300</br>
  <input type="checkbox" name="item" value="80" />Cable RM 80</br>
  <input type="checkbox" name="item" value="110" />Extention RM 110</br>
  <input type="checkbox" name="item" value="400" />Redmi RM400</br>

  <p><input type="button" name="subbtn" value="Send" onclick="getprice();" /></p><br/>

  <p id="totalprice"></p>
  <p id="totalitem"></p>
  <p id="newupdatep"></p>
  <p id="smallestp"></p>
</form>

Answer 2

您的代码已更新。我更改了一些部分以使其更容易和更清晰。

选中复选框的所有值都存储在 checkedValues 数组中

此代码使用 Array#filter()、Array#map()、Array#reduce() 和 math.min.apply

function getprice() {
  let checkedValues = Array.from(document.frm1.item).filter(i=>i.checked).map(i=>+i.value);

  let total = checkedValues.length === 0 ? 0 : checkedValues.reduce((a, b) =>a+b);
  document.getElementById("totalprice").innerHTML = "Total Price : RM " + total.toFixed(2);
  document.getElementById("totalitem").innerHTML = "Total item: " + checkedValues.length;

  if (total >= 300 && checkedValues.length >= 10) {
    let min = Math.min.apply(Math, checkedValues);
    document.getElementById("smallestp").innerHTML = "Smallest price : RM " + min.toFixed(2);
  }
}

<form name="frm1">

  <input type="checkbox" name="item" value="100" />Pan RM 100<br>
  <input type="checkbox" name="item" value="50" />Fork RM 50<br>
  <input type="checkbox" name="item" value="200" />Stove RM 200<br>
  <input type="checkbox" name="item" value="10" />Pen RM 10<br>
  <input type="checkbox" name="item" value="60" />Mouse RM 60<br>
  <input type="checkbox" name="item" value="40" />Keyboard RM 40<br>
  <input type="checkbox" name="item" value="30" />Glue RM 30<br>
  <input type="checkbox" name="item" value="210" />Speaker RM 210<br>
  <input type="checkbox" name="item" value="300" />Case RM 300<br>
  <input type="checkbox" name="item" value="80" />Cable RM 80<br>
  <input type="checkbox" name="item" value="110" />Extention RM 110<br>
  <input type="checkbox" name="item" value="400" />Redmi RM400<br>

  <p><input type="button" name="subbtn" value="Send" onclick="getprice();" /></p><br/>

  <p id="totalprice"></p>
  <p id="totalitem"></p>
  <p id="newupdatep"></p>
  <p id="smallestp"></p>


</form>

使用 JavaScript 获取复选框中值的最小值

Get the smallest value of value in checkbox using JavaScript

javascript

checkboxlist