Javascript jQuery-带有复选框的操作

我的剧本：

jsfiddle.net/jcfcymsx/

我想要的是：

问题#1当复选框为.parent时，如果也选中了.child1或.child2，则显示metdata1或metdata2的数组值。如果都选中了.child复选框，我想显示两个数组的合计值。出现错误-仅当选中.parent和.child2时，显示值加倍。如何解决

问题#2-我希望在pageload上选中所有3个复选框，无需单击即可获得两个数组的合计值。有什么想法吗

---

谢谢

您的问题在于这一行：

$("input[type=checkbox]:checked").each(function() { 

metdata[i] = metdata[i] + metdata2[i];

这将为每个复选框运行循环，因此如果所有三个复选框都被勾选，它将运行3次

如果勾选了

child1

，则此行：

metdata[i] = metdata1[i];

将该值重置为

metdata1

，因此无论运行多少次都无所谓

如果未勾选

child1

（但

child2

为），则此行：

$("input[type=checkbox]:checked").each(function() { 

metdata[i] = metdata[i] + metdata2[i];

运行两次（对于父对象和子对象2），因此会得到两个值

要修复： 只需删除循环：更新的小提琴：

---

要初始设置值，请将

checked='checked'

添加到每个复选框中，并在加载时运行

recommulate（）

---

更新的fiddle:

问题1：在您的重新计算函数中，我不明白为什么有这一行：

$（“输入[type=checkbox]：选中”）。每个（函数（）{

。唯一要做的是从一个

元数据

零数组开始，如果需要，添加metadata1和metadata2的值

问题2：只需选中

$（文档）上的复选框即可。准备好
函数并调用您的重新计算函数：

$(document).ready(function() {

    var metdata1 = [34, 32, 32, 35, 36, 39];
    var metdata2 = [54, 57, 58, 63, 67, 69];    

    function recalculate() {                                             

    var metdata = [];

    for (var i = 0; i < metdata1.length; i++) {     
      metdata[i] = 0; 
    }

     $("input[type=checkbox]:checked").each(function() {            

            if ($('input.child1').is(':checked')) {
              for(var i = 0; i < metdata1.length; i++) {
                metdata[i] = metdata1[i];
              }
            }
            if ($('input.child2').is(':checked')) {
              for(var i = 0; i < metdata2.length; i++) {
                metdata[i] = metdata[i] + metdata2[i];
              }
            }
    });

    if ($('input.parent').is(':checked')) {    
    $("#output").html(metdata +" ");
    }

    }


    $("input[type=checkbox]").change(function() {
        recalculate();
    });

}); 

$（文档）.ready（函数（）{
var metdata1=[34,32,32,35,36,39]；
var metdata2=[54,57,58,63,67,69]；
函数重新计算（）{
var metdata=[]；
对于（var i=0；i

和链接：
HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p><input type="checkbox" class="parent" checked><b>Parent</b></p>   
<p>
  <input type="checkbox" class="child1" checked>Child 1
  <input type="checkbox" class="child2" checked>Child 2
</p>

<span id="output"></span>


家长


儿童1
儿童2


使用JQUERY

$(document).ready(function() {
    var metdata1 = [34, 32, 32, 35, 36, 39];
    var metdata2 = [54, 57, 58, 63, 67, 69];                                             
    function recalculate()
    {
        if ($('input.parent').is(':checked'))
        {
            var metdata = [];
            var ischild1checked = $('input.child1').is(':checked'), ischild2checked = $('input.child2').is(':checked');
            if (ischild1checked)
            {
                metdata=metdata1.slice();
            }
            if (ischild2checked)
            {
                metdata = metdata2.slice();
                for(var i = 0; i < metdata2.length && ischild1checked; i++)
                {
                    metdata[i] += metdata1[i];
                }
            }
            $("#output").html(metdata+"");
        }
        else
        {
            $("#output").html("");
        }
    }

    $("input[type=checkbox]").change(function(event) {
            recalculate();
    });
    recalculate();
}); 

$（文档）.ready（函数（）{
var metdata1=[34,32,32,35,36,39]；
var metdata2=[54,57,58,63,67,69]；
函数重新计算（）
{
如果（$（'input.parent'）。是（':checked'））
{
var metdata=[]；
变量ischild1checked=$（'input.child1'）。是（':checked'），ischild2checked=$（'input.child2'）。是（':checked'）；
如果（已检查）
{
metdata=metdata1.slice（）；
}
如果（已检查）
{
metdata=metdata2.slice（）；
对于（var i=0；i

使用纯JS（添加后任何人都可以参考）

var metdata1=[34,32,32,35,36,39]；
var metdata2=[54,57,58,63,67,69]；
函数重新计算（）
{
var output_elem=document.getElementById（“输出”）；
if（document.querySelector（“input[class=parent]”）。选中）
{
var metdata=[]；
var ischild1checked=document.querySelector（“输入[class=child1]”）。选中，ischild2checked=document.querySelector（“输入[class=child2]”）。选中；
如果（已检查）
{
metdata=metdata1.slice（）；
}
如果（已检查）
{
metdata=metdata2.slice（）；
对于（var i=0；ifor（var i=0，n=checkboxes.length；iQuestions）寻求调试帮助应包括所需的行为、特定的问题或错误以及在问题本身中重现该问题所需的最短代码。没有明确问题说明的问题对其他读者无效。请参阅：。检查[抱歉，我只是想提出建议。这并不意味着我不喜欢Jquery/其他第三方。因为我专注于逻辑，所以我将它们改为纯JS。现在修改了答案。感谢您的报告。以后会做得很清楚。