如何显示每个文本区域的总值？

时间：2014-10-20 07:55:28

标签： javascript html textfield

我有这样的代码，如果选中该复选框，则复选框的值将乘以下拉列表的值，并将产品显示在文本字段中。如何将每个文本字段的总数显示在文本字段中。

function special1() {
            var m = document.getElementById("check1").checked;
            var x = document.getElementById("check1").value;
            var y = document.getElementById("qty1").value;
            var z = 0;
            if (m == true) {
                z = "P" + x * y;
            }
            document.getElementById("total1").value = z;
        }
        function special2() {
            var m = document.getElementById("check2").checked;
            var x = document.getElementById("check2").value;
            var y = document.getElementById("qty2").value;
            var z = 0;
            if (m == true) {
                z = "P" + x * y;
            }
            document.getElementById("total2").value = z;
        }
<table border="1">
    <tr>
        <td colspan="3">
            <h2><font color="white">Specialty Cakes</h2>
        </td>
    </tr>
    <tr>
        <td>
            <center>
                <img src="special\blackforest_small.jpg"><br>
                <font color="white">
            Black Forest</td>
        <td><font color="white">
            <input type="checkbox" id="check1" name="check1" value="550.00" onclick="special1()">Buy P550.00</input><br>
            <input type="text" id="total1" name="total1" value="P0.00" size="8"></input><br>
            <font color="white">QTY:
                <select id="qty1" name="qty1" onchange="special1()">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
        </td>
    </tr>
    <tr>
        <td>
            <center>
                <img src="special\chocolata_small.jpg"><br>
                <font color="white">Chocolata</center>
        </td>
        <td><font color="white">
            <input type="checkbox" id="check2" name="check2" value="550.00" onclick="special2()">Buy P500.00</input><br>
            <input type="text" id="total2" name="total2" value="P0.00" size="8"></input><br>
            QTY:
            <select id="qty2" name="qty2" onchange="special2()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
        </td>
    </tr>
</table>

1 个答案:

答案 0 :(得分：0)

您应该在发布前使用w3cvalidator验证您的HTML代码。我已修改您的代码以正常工作。 

<table border="1">
<tr>
<td colspan="3"><h2>Specialty Cakes</h2></td>
</tr>
<tr>
    <td>
        <img src="special/blackforest_small.jpg"/>   
        <br />Black Forest
     </td>
<td>
    <input type="checkbox" id="check1" name="check1" value="550.00" />Buy P550.00<br /><input type="text" id="total1" name="total1" value="P0.00" size="8"><br />
QTY: <select id="qty1" name="qty1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
<tr>
    <td><img src="special/chocolata_small.jpg" /><br />Chocolata</td>
    <td><input type="checkbox" id="check2" name="check2" value="550.00" />Buy P500.00<br /><input type="text" id="total2" name="total2" value="P0.00" size="8" /><br />
QTY: <select id="qty2" name="qty2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('input:checkbox').change(function(){
    if($(this).is(':checked'))
    {
        var total = $(this).siblings('input:text');            
        var dropdown = $(this).siblings('select');
        total.val('p'+( $(this).val()*dropdown.val() ));
    }
});

$('select').change(function(){

    var total    = $(this).siblings('input:text');
    var checkbox = $(this).siblings('input:checkbox');
    if(checkbox.is(':checked'))
    {
        total.val('p'+( $(this).val()*checkbox.val() ));
    }
});

 });
</script>

试试这个小提琴：http://jsfiddle.net/qhuLrvjn/

Pure Javascript代码：

    <script>
    var firstVal = 0.00;
    var secondVal = 0.00;
    function special1() {
            var m = document.getElementById("check1").checked;
            var x = document.getElementById("check1").value;
            var y = document.getElementById("qty1").value;
            var z = 0;
    if (m == true) {
                z = "P" + x * y;
                firstVal = x * y;
     }
    else
    {
       z = "P"+"0.00";
       firstVal = 0;
    }
            document.getElementById("total1").value = z;

    document.getElementById("grand").value = 'P'+(firstVal + secondVal);
        }

    function special2() {
            var m = document.getElementById("check2").checked;
            var x = document.getElementById("check2").value;
            var y = document.getElementById("qty2").value;
            var z = 0;
    if (m == true) {
                z = "P" + x * y;
                secondVal = x * y;
     }
    else
    {
      z = "P"+"0.00";
       secondVal = 0;
    }
            document.getElementById("total2").value = z;
                document.getElementById("grand").value = 'P'+(firstVal + secondVal);
        }

</script>
<table border="1">
<tr>
<td colspan="3"><h2>Specialty Cakes</h2></td>
</tr>
<tr>
    <td>
        <img src="special/blackforest_small.jpg"/>   
        <br />Black Forest
     </td>
<td>
    <input type="checkbox" id="check1" name="check1" value="550.00" onchange="special1()" />Buy P550.00<br />
    <input type="text" id="total1" name="total1" value="P0.00" size="8" /><br />
QTY: 
   <select id="qty1" name="qty1"  onchange="special1()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
<tr>
    <td><img src="special/chocolata_small.jpg" /><br />Chocolata</td>
    <td><input type="checkbox" id="check2" name="check2" value="550.00" onchange="special2()" />Buy P500.00<br /><input type="text" id="total2" name="total2" value="P0.00" size="8" /><br />
QTY: <select id="qty2" name="qty2" onchange="special2()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
    <tr><td colspan="3">Total Amount: <input type="text" id="grand" name="grand" value="P0.00" /></td></tr>
</table>
相关问题
最新问题