JavaScript - 仅在选中时计算复选框

时间:2013-03-31 11:55:04

标签: javascript checkbox checked

我是一名Javascript初学者,但我使用Javascript数学函数为我的网站构建了一个简单的Cost Estimator。

function calc(form) {
    a = eval(form.a.value)
    b = eval(form.b.value)
    c = eval(form.c.value)
    x = a*(b+c)
    form.ans.value = parseFloat(x).toFixed(2);
}

表单很简单:

<form name="formx">
    <label for="a">Number of Units :</label>
    <input type="number" size=3 value=0 name="a">
    <label for="b">Price per Unit :</label>
    <select name="b">
        <option value="0.04">0.04</option>
        <option value="0.05">0.05</option>
        <option value="0.06">0.06</option>
    </select>
    <label for="c">Tick if Urgent</label>
    <input name="c" type="checkbox" value="0.01" />
    <input class="button" type="button" value="  CALCULATE  " onClick="calc(this.form)">
    <label for="ans">Total Cost :</label>
    <input value=" £ " name="ans" size=6>
</form>

紧急服务的“c”值为0.01,但是当选中复选框时需要添加 ONLY ,否则其值必须为0.但我似乎无法搞清楚,因为它总是将“c”值添加为0.01,选中或取消选中。

请帮忙

2 个答案:

答案 0 :(得分:4)

试试这个 -

function calc(form) {
    var a = parseFloat(form.a.value)
    var b = parseFloat(form.b.value)
    var c = (form.c.checked) ? parseFloat(form.c.value) : 0;
    var x=a*(b+c)
    form.ans.value=parseFloat(x).toFixed(2);
}

注意 -

eval是邪恶的

来自Douglas Crockford的网站 - JavaScript Code conventions

  

eval函数是JavaScript最被误用的功能。避免它。

     

eval有别名。不要使用Function构造函数。禁止通过   字符串到setTimeout或setInterval。

另外,请阅读 -

答案 1 :(得分:0)

考虑使用Radio Buttons而不是Checkboxes。然后,您可以将多个值链接到单个对象。有关确切的差异,请参阅http://www.w3schools.com/html/html_forms.asp