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 - ") );
}

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

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

onclick of button使用jquery将复选框值复选到函数中

3 个答案: