Question

我需要一些家庭作业的帮助。因此，我试图制作一个简单的计算器来估算草坪曝气的价格。我添加了一个功能和输入框，以找出人的草坪区域，以便我可以给他们一个估计，这很有效。我想添加一些复选框，以便他们可以提供有关他们的草坪的更多信息，我可以在估算中使用。我有3个复选框：如果他们有一只狗，如果他们到处都有洒水器，如果他们的院子在山上。我想为他们检查的每个盒子加价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.";
}

如果你花时间阅读并帮助我解决方案，那么非常感谢你。

Answer 1

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

＆＃13;

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.";

}

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用以下方法检查复选框是否被选中： -

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

Answer 3

为您创建此fiddle。您只是通过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.";

}

Answer 4

function estimate（）{ var count = $（＆＃34; [type =＆＃39; checkbox＆＃39;]：checked＆＃34;）。length * 5; var area1; var area2; 变价; area1 = document.getElementById（＆＃34; front＆＃34;）。value; area2 = document.getElementById（＆＃34; back＆＃34;）。value; price =（（parseFloat（area1）+ parseFloat（area2））* .015）+ count; $（＆＃34; #messo＆＃34;）。html（＆＃34;我们将为您的草坪充气＃34; +价格+＆＃34;美元。＆＃34;）; }

<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>

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

4 个答案: