按钮的 onclick 使用 jquery 将选中的复选框值发送到函数

Question

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

<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" />

我的 js 代码

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" />

Answer 2

你的提交函数应该是这样的

function submit(check) {
    var values = [];
    for (i = 0; i < check.length; i++) {
        if (check[i].checked == true) {
            //  alert($(check[i]).value);
            var el = $(check[i]);

          var test = el.next().text();
           alert(test);

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

Check the Working Fiddle Here

Answer 3

我强烈建议从您的输入中删除您的 onclick 和 onchange 属性。在你的 javascript 文件中绑定它们，这样更干净。

这里有一些修改后的代码，可以按照您的意愿进行操作。单击复选框也会自动单击嵌套的复选框，反之亦然。单击“确定”将使用以下<a> 元素作为复选框的名称，并告诉您哪些已被选中。

// This is your jQuery "ready" function, where you should bind your events.
$(function() {
    // Clicking on an <input:checkbox> should check any children checkboxes automatically
    $('input:checkbox').change( fnTest );

    // Clicking the OK button should run submit(), pop up displays all checked boxes
    $('#testB').click( submit );
});


function fnTest(e) {
    var is_checked = $(this).prop('checked');

    // Set all child checkboxes to the same value
    $(this)
        .closest('li') // Navigate up, find closest <li>
        .find('input:checkbox') // Find all checkboxes within the <li>
            .prop('checked', is_checked );
}

function submit(e) {
    // When you click OK, dipslay the label for each checkbox
    var checked = [];

    // Loop through all checked checkboxes
    $('input:checkbox:checked').each(function() {
        // For each checkbox, find the following <a>. Add the text of that element to the "checked" array.
        checked.push( $(this).next('a').text() );
    });

    alert("You have selected:\n\n - " + checked.join("\n - ") );
}

HTML 是相同的，只是删除了 onclick/onchange 属性。

这是一个小提琴：http://jsfiddle.net/RadGH/3a050r6r/