javascript - onclick of button使用jquery将选中的复选框值发送到函数

Question

我有一个 html 代码，我在其中选中复选框，并在每个复选框旁边为 anchor 标记提供了特定的文本标记。当用户点击父复选框时，子复选框被选中。现在单击“确定”按钮，我需要将选中的复选框发送到 javascript 函数。因为在我的代码中没有复选框的值，所以我需要将相应的 anchor 标记值发送到 javascript 函数。但是所有 anchor 标记都被发送到函数。我只想将对应 anchor 标记值的复选框发送到函数。

<ul class="test_ex">
    <li>
        <input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Fruits</a>

        <ul class="example">
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>

            </li>
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>

            </li>
        </ul>
        <ul class="test_ex_sample">
            <li>
                <input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Birds</a>

                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>

                    </li>
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>

                    </li>
                </ul>
                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref"> Food </a>

                        <ul class="example">
                            <li>
                                <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<input type="button" id="testB" onclick="submit(document.getElementsByTagName('input'))" value="OK" />

我的代码

function fnTest(check) {

    if ($(check).is(':checked')) {
        $(check).siblings('.example:first').find('.child').prop("checked", true);
    } else {
        $(check).siblings('.example:first').find('.child').prop("checked", false);
    }
}

function submit(check) {
    var values = [];
    for (i = 0; i < check.length; i++) {
        if (check[i].checked == true) {
            //  alert($(check[i]).value);
            var test = document.getElementsByTagName("a");
            alert($(test).text());

            values.push($(test).text());
        }
    }
    // alert(values.eq(0));
    alert(values.join());
    //alert(values);
    //var text[]=values.text();
    //  alert(text);
}

这是一个演示 Fiddle

Answer 1

您可以像这样简化您的代码:

function submit() {
    var values = [];
    $("input[type=checkbox]:checked").each(function(){
        values.push($(this).next("a").text());
    });
    alert(values.join());
}

在你的按钮上删除参数，因为你不需要那个..

<input type="button" id="testB" onclick="submit()" value="OK" />