如何仅在选中复选框时添加值

How to add the value only if checkbox is checked

本文关键字：添加 复选框 何仅      更新时间：2023-09-26

我需要一些家庭作业方面的帮助。所以我试着做一个简单的计算器来估计草坪充气的价格。我添加了一个函数和输入框，可以找出这个人草坪的面积，这样我就可以给他们一个估计，效果很好。我想添加一些复选框，这样他们就可以提供更多关于他们草坪的信息，我可以在评估中使用。我有三个复选框：如果他们有狗，如果他们到处都有洒水器，如果他们的院子在山上。我只想在他们检查的每个盒子的价格上加5美元。

我遇到的问题是，当我将每个文本框的属性设置为5时，即使该框仍然未选中，该函数也会增加5美元。如果复选框未选中，我不知道如何使变量的值为0，如果复选框为5。这可以只用Javascript和HTML完成吗？

我正在使用的代码是：

<div class="section1">
    <h2>Get an estimate</h2>
    <p>We'll need a little information for this estimate. The estimate is <strong>not</strong> the final price.</p>
    <p><label for="front">What is the area of your front yard? (square feet)</label>
        <input id="front" type="number"></p>
    <p><label for="back">What is the area of your back yard? (square feet)</label>
        <input id="back" type="number"></p>
    <form>
        <input type="checkbox" id="dog" value="5"> I have a dog
        <br>
        <input type="checkbox" id="sprinklers" value="5"> I have sprinklers everywhere
        <br>
        <input type="checkbox" id="hill" value="5"> My yard is on a hill
    </form>
    <p><button onclick="estimate()">Submit for estimate</button></p>
    <p id="message"></p>
</div>

和

function estimate(){
    var canine;
    var water;
    var terrain;
    canine = document.getElementById("dog").value
    water = document.getElementById("sprinklers").value
    terrain = document.getElementById("hill").value
    var area1;
    var area2;
    var price;
    area1 = document.getElementById("front").value;
    area2 = document.getElementById("back").value;
    price = ((parseFloat(area1)+parseFloat(area2))*.015)+parseFloat(canine)+parseFloat(water)+parseFloat(terrain);
    document.getElementById("message").innerHTML="We will aerate your lawn for around "+price.toFixed(1)+" dollars.";
}

如果你花时间通读这篇文章，并帮助我找到解决方案，非常感谢。

在获取值之前，您需要检查复选框是否选中。：

function estimate(){
    var canine=0;
    var water=0;
    var terrain=0;
    if (document.getElementById('dog').checked){
    canine = document.getElementById("dog").value;
    }
    if (document.getElementById('sprinklers').checked){
    water = document.getElementById("sprinklers").value;
    }
    if (document.getElementById('hill').checked){
    terrain = document.getElementById("hill").value;
    }
    var area1=0;
    var area2=0;
    var price=0;
    area1 = document.getElementById("front").value;
    area2 = document.getElementById("back").value;
    price = ((parseFloat(area1)+parseFloat(area2))*.015)+parseFloat(canine)+parseFloat(water)+parseFloat(terrain);
    document.getElementById("message").innerHTML="We will aerate your lawn for around "+price.toFixed(1)+" dollars.";
}
<div class="section1">
    <h2>Get an estimate</h2>
    <p>We'll need a little information for this estimate. The estimate is <strong>not</strong> the final price.</p>
    <p><label for="front">What is the area of your front yard? (square feet)</label>
        <input id="front" type="number"></p>
    <p><label for="back">What is the area of your back yard? (square feet)</label>
    <input id="back" type="number"></p>
    <form>
        <input type="checkbox" id="dog" value="5"> I have a dog
        <br>
        <input type="checkbox" id="sprinklers" value="5"> I have sprinklers everywhere
        <br>
        <input type="checkbox" id="hill" value="5"> My yard is on a hill
    </form>
    <p><button onclick="estimate()">Submit for estimate</button></p>
    <p id="message"></p>
</div>

为您创建了这个小提琴。您错过了通过简单地执行document.getElementById("dog").checked 来检查复选框是否被选中

function estimate(){
    var canine;
    var water;
    var terrain;
    canine = document.getElementById("dog").value;
    canine = document.getElementById("dog").checked ? canine : 0;
    water = document.getElementById("sprinklers").value
    water = document.getElementById("sprinklers").checked ? water : 0;
    terrain = document.getElementById("hill").value
    terrain = document.getElementById("hill").checked ? terrain : 0;
    var area1;
    var area2;
    var price;
    area1 = document.getElementById("front").value;
    area2 = document.getElementById("back").value;
    price = ((parseFloat(area1)+parseFloat(area2))*.015)+parseFloat(canine)+parseFloat(water)+parseFloat(terrain);
    document.getElementById("message").innerHTML="We will aerate your lawn for around "+price.toFixed(1)+" dollars.";
}

u可以使用：-检查复选框是否选中

document.getElementById('checkboxid').checked;

并相应地增加定价。只需更改

canine = document.getElementById("dog").value
water = document.getElementById("sprinklers").value
terrain = document.getElementById("hill").value

至：

canine = document.getElementById("dog").checked ? document.getElementById("dog").value : 0
water = document.getElementById("sprinklers").checked ? document.getElementById("sprinklers").value : 0
terrain = document.getElementById("hill").checked ? document.getElementById("hill").value : 0
函数估计（）{var count=$（"[type=‘checkbox’]：已选中"）.length*5；var area1；var area2；var价格；area1=document.getElementById（"front"）.value；area2=document.getElementById（"back"）.value；price=（（parseFloat（area1）+parseFloot（area2））*.015）+count；$（"#message"）.html（"我们将为您的草坪充气大约"+价格+"美元"）；}

<h2>Get an estimate</h2>
<p>We'll need a little information for this estimate. The estimate is <strong>not</strong> the final price.</p>

<p><label for="front">What is the area of your front yard? (square feet)</label>
    <input id="front" type="number"></p>
<p><label for="back">What is the area of your back yard? (square feet)</label>
<input id="back" type="number"></p>
<form>
    <input type="checkbox" id="dog"  > I have a dog
    <br>
    <input type="checkbox" id="sprinklers" > I have sprinklers everywhere
    <br>
    <input type="checkbox" id="hill" > My yard is on a hill
</form>
<p><button onclick="estimate()">Submit for estimate</button></p>
<p id="message"></p>

相关文章：