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

onclick of button send checked checkbox values to a function using jquery

提问by user3201640

I have an html code where i check the checkboxes and adjacent to each checkboxes an anchor tag is provided with certain text tag. when user clicks on the parent checkbox child checkboxes are checked. Now onclick of an "OK" button I need to send the checked checkboxes to a javascript function. As in my code there is no value for checkbox I need the corresponding anchor tag value to be sent to javascript function. But all anchor tags are being sent to the function. I want only the checked boxes corresponding anchor tag values to be sent to the function.

我有一个 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" />

my js code

我的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);
}

Here is a demo Fiddle

这是一个演示小提琴

回答by Bla...

You can simplify your code like this:

您可以像这样简化代码：

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

On your button remove the parameter because you don't need that..

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

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

回答by Chakravarthy S M

Your Submit Function Should be like this

你的提交功能应该是这样的

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

在此处检查工作小提琴

回答by Radley Sustaire

I highly suggest removing your onclickand onchangeattributes from your inputs. Bind those in your javascript file, it's cleaner that way.

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

Here is some modified code which does as you desire. Clicking a checkbox will also click nested checkboxes automatically, and vice-versa. Clicking OK will use the following <a>elements as the name for the checkbox, and tell you which are checked.

这是一些修改后的代码，可以满足您的需求。单击复选框也会自动单击嵌套的复选框，反之亦然。单击确定将使用以下<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 - ") );
}

The HTML is the same, except the onclick/onchange attributes were removed.

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

Here is a fiddle: http://jsfiddle.net/RadGH/3a050r6r/

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