Question

我有一个带有复选框的各种项目的表单，这些项目可能会重复多次。我希望有另一个表或表单显示所有这些项目，并且具有已检查项目数的运行总计，并在检查时更新。

我们说我已经得到了这样的初始形式：

<form name="myform">
<input type="checkbox" name="model1" value="2">2 x model1
<input type="checkbox" name="model2" value="2">2 x model2
<input type="checkbox" name="model3" value="2">2 x model3
<input type="checkbox" name="model1" value="1">1 x model1
<input type="checkbox" name="model1" value="4">4 x model1
<input type="checkbox" name="model3" value="5">5 x model3
<p>
Totals: <br>
<input type="text" name="totalmodel1" value="0" size="2"><br>
<input type="text" name="totalmodel2" value="0" size="2"><br>
<input type="text" name="totalmodel3" value="0" size="2"><br>
</form>

如何在检查项目时更新总计。我已经使用javascript更新了很多其他类似的东西，我发现了一些例子，如果要将它们全部加在一起，我会选择加入我的选择，但我还没能成功制作它可以单独添加多个项目。

感谢任何和所有帮助。

Answer 1

我制作了一个JS小提琴，作为从哪里开始的例子...... Here

基本上我做的是：

将输入文本关联到复选框：

var modelNum = ($(this).attr("name")).slice(($(this).attr("name").length) - 1, $(this).attr("name").length);

var child = "totalmodel" + modelNum;

仅在选中相关复选框时才显示输入文本：

if (this.checked) {
     $("input").each(function() {
         if ($(this).attr("name") == child) {
              $(this).show();
         }
     });
} else {
     $("input").each(function() {
         if ($(this).attr("name") == child) {
             $(this).hide();
         }
     });
}

并告诉您如何获取文本的值（假设用户将输入整数）：

$("input").each(function(){ //This is how you get the value of each...
    if($(this).is(":text")){
        var value = $(this).attr("value");
    }
});

Answer 2

所以我之前在http://www.madirish.net/11找到了一个我做了我想要的例子但是只有一个项目总计。我需要分别合计多个项目。我一直试图根据我的需要修改他的代码而且它没有工作，但后来我意识到当我把它粘贴到jsfiddle时他的代码不会工作。所以我在我自己的服务器上尝试了它并且它有效。我放弃了jsfiddle（我确定这是我的错，不管怎么说它没有用）并开始在我自己的服务器上进行测试。这是我为使其工作所做的一个示例输出（请忽略丑陋的布局......在测试时我并不需要它很漂亮。）

<script type="text/javascript">
    function checkTotal1() {
        document.listForm.total1.value = '';
        var sum = 0;
        if (document.getElementsByName("choice1").length == 1) {
            if (document.listForm.choice1.checked) {
                sum = sum + parseInt(document.listForm.choice1.value);
            }
        } else {
            for (i=0;i<document.listForm.choice1.length;i++) {
                if (document.listForm.choice1[i].checked) {
                    sum = sum + parseInt(document.listForm.choice1[i].value);
                }
            }
        }
        document.listForm.total1.value = sum;
    }
    function checkTotal2() {
        document.listForm.total2.value = '';
        var sum = 0;
        if (document.getElementsByName("choice2").length == 1) {
            if (document.listForm.choice2.checked) {
                sum = sum + parseInt(document.listForm.choice2.value);
            }
        } else {
            for (i=0;i<document.listForm.choice2.length;i++) {
                if (document.listForm.choice2[i].checked) {
                    sum = sum + parseInt(document.listForm.choice2[i].value);
                }
            }
        }
        document.listForm.total2.value = sum;
    }
    function checkTotal3() {
        document.listForm.total3.value = '';
        var sum = 0;
        if (document.getElementsByName("choice3").length == 1) {
            if (document.listForm.choice3.checked) {
                sum = sum + parseInt(document.listForm.choice3.value);
            }
        } else {
            for (i=0;i<document.listForm.choice3.length;i++) {
                if (document.listForm.choice3[i].checked) {
                    sum = sum + parseInt(document.listForm.choice3[i].value);
                }
            }
        }
        document.listForm.total3.value = sum;
    }
    function checkTotal4() {
        document.listForm.total4.value = '';
        var sum = 0;
        if (document.getElementsByName("choice4").length == 1) {
            if (document.listForm.choice4.checked) {
                sum = sum + parseInt(document.listForm.choice4.value);
            }
        } else {
            for (i=0;i<document.listForm.choice4.length;i++) {
                if (document.listForm.choice4[i].checked) {
                    sum = sum + parseInt(document.listForm.choice4[i].value);
                }
            }
        }
        document.listForm.total4.value = sum;
    }
    function checkTotal5() {
        document.listForm.total5.value = '';
        var sum = 0;
        if (document.getElementsByName("choice5").length == 1) {
            if (document.listForm.choice5.checked) {
                sum = sum + parseInt(document.listForm.choice5.value);
            }
        } else {
            for (i=0;i<document.listForm.choice5.length;i++) {
                if (document.listForm.choice5[i].checked) {
                    sum = sum + parseInt(document.listForm.choice5[i].value);
                }
            }
        }
        document.listForm.total5.value = sum;
    }
</script>

<form name="listForm">
    <table>
        <tr>
            <td align="left" valign="top">
                <input type="checkbox" name="choice1" value="1" onchange="checkTotal1()">1 x mod1<br>
                <input type="checkbox" name="choice1" value="1" onchange="checkTotal1()">1 x mod1<br>
                <input type="checkbox" name="choice2" value="2" onchange="checkTotal2()">2 x mod2<br>
                <input type="checkbox" name="choice2" value="2" onchange="checkTotal2()">2 x mod2<br>
                <input type="checkbox" name="choice3" value="1" onchange="checkTotal3()">1 x mod3<br>
                <input type="checkbox" name="choice3" value="1" onchange="checkTotal3()">1 x mod3<br>
                <input type="checkbox" name="choice3" value="1" onchange="checkTotal3()">1 x mod3<br>
                <input type="checkbox" name="choice4" value="1" onchange="checkTotal4()">1 x mod4<br>
                <input type="checkbox" name="choice5" value="1" onchange="checkTotal5()">1 x mod5<br>
                <input type="checkbox" name="choice5" value="1" onchange="checkTotal5()">1 x mod5<br>
            </td>
        <td align="left" valign="top">
            <table>
                <tr>
                    <th>Product Model</th>
                    <th>Qty Received</th>
                    <th>Qty Checked</th>
                </tr>
                <tr>
                    <td>mod1</td>
                    <td align="right">2</td>
                    <td><input type="text" size="3" name="total1" value="0"></td>
                </tr>
                <tr>
                    <td>mod2</td>
                    <td align="right">4</td>
                    <td><input type="text" size="3" name="total2" value="0"></td>
                </tr>
                <tr>
                    <td>mod3</td>
                    <td align="right">3</td>
                    <td><input type="text" size="3" name="total3" value="0"></td>
                </tr>
                <tr>
                    <td>mod4</td>
                    <td align="right">1</td>
                    <td><input type="text" size="3" name="total4" value="0"></td>
                </tr>
                <tr>
                    <td>mod5</td>
                    <td align="right">2</td>
                    <td><input type="text" size="3" name="total5" value="0"></td>
                </tr>
            </table>
        </td>
        </tr>
    </table>
</form>

Javascript从复选框更新多个表单总计

2 个答案: