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

Question

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.

<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

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

Solution 1

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

Solution 2

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

Solution 3

I highly suggest removing your onclick and onchange attributes from your inputs. Bind those in your javascript file, it's cleaner that way.

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.

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

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

Comments

[Radley Sustaire]

You should try to avoid inconsistent library usage. If you are using jQuery, you should not randomly use document.getElementByID. It's just confusing as you're working with a DOM node and a jQuery element for different variables.

[user3201640]

ok sir ii will change the method which I am following But now how do I solve the problem?

[Radley Sustaire]

Answer has been posted below, hope it helps!