Question

我的剧本：

jsfiddle.net/jcfcymsx /

我想要的是什么：

问题＃1 - 如果选中复选框.parent，则显示metdata1或metdata2的数组值，如果也检查.child1或.child2。如果同时选中.child复选框，我想显示两个数组的求和值。出现错误 - 仅检查.parent和.child2时，显示的值加倍。怎么解决？

问题＃2 - 我希望在pageload上检查所有3个复选框，并获得两个数组的总和值，而无需单击。有什么想法吗？

谢谢！

Answer 1

你的问题在于这一行：

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

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

如果勾选child1，则此行：

metdata[i] = metdata1[i];

将值重置为metdata1，因此无论运行多少次都无关紧要。

如果未勾选child1（但child2是），则此行：

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

运行两次（对于parent和child2），因此您获得双倍值。

修复：只需删除循环：更新小提琴：http://jsfiddle.net/jcfcymsx/3/

要初始设置值，请在每个复选框中添加checked='checked'并在加载时运行recalculate()。

更新了小提琴：http://jsfiddle.net/jcfcymsx/4/

Answer 2

问题1：在您的重新计算功能中，我不明白为什么会有这一行：$("input[type=checkbox]:checked").each(function() {。唯一要做的就是开始使用metadata零数组，并根据需要添加metadata1和metadata2的值

问题2：只需选中$(document).ready功能的复选框，然后调用重新计算功能：

$(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();
    });

});

链接：JSFiddle

Answer 3

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

使用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();
});

使用PURE JS （添加，任何人都可以参考）

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

function recalculate()
{
    var output_elem = document.getElementById("output");
    if (document.querySelector("input[class=parent]").checked)
    {
        var metdata = [];
        var ischild1checked = document.querySelector("input[class=child1]").checked, ischild2checked = document.querySelector("input[class=child2]").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_elem.innerHTML = metdata;
    }
    else
    {
        output_elem.innerHTML = "";
    }
}

function addEvents()
{
        var checkboxes = document.querySelectorAll("input[type=checkbox]");
        for(var i=0,n=checkboxes.length;i<n;i++)
        {
            checkboxes[i].addEventListener( 'change', function() {
                recalculate();
            });
        }
}

if(window.addEventListener)
{
        document.addEventListener('DOMContentLoaded', addEvents());
}
else if(document.body.attachEvent)
{
        document.body.attachEvent("onreadystatechange", addEvents());
}

recalculate();

使用简化的代码处理所有案例。注意：

避免使用多个循环。
无需使用0＆＃39>初始化元数据。
在需要的地方使用（d）纯JS功能，而不是依赖第三方。

JS FIDDLE

jQuery - 带复选框的操作

3 个答案: