How do I get Jquery to compare between two selectors?

I think my JQuery knowledge is a little lacking.

On my page I have 0 or more hidden variables that look like this.

<input type='hidden' class='defaultTickedStatus' value='INACTIVE' />
<input type='hidden' class='defaultTickedStatus' value='ACTIVE' />

They can be accessed via the selector $(".defaultTickedStatus")

I also have a number of checkboxes in an element like this

<div id="checkboxes">
<input type="checkbox" value="INACTIVE" id="checkbox1" tabindex="30430">
<input type="checkbox" value="ACTIVE" id="checkbox1" tabindex="30430">
<input type="checkbox" value="SUBMITTED" id="checkbox1" tabindex="30430">
<input type="checkbox" value="FINALISED" id="checkbox1" tabindex="30430">
...
</div>

They can be accessed via the selector $("#checkboxes input")

What I would like to do is when the user clicks a button, I want it go through all of the checkboxes and for the ones that have a value which equals one of the values in the hidden tags, then to check it.

However, being a little unfamiliar with JQuery, I'm unfamiliar with how to accomplish this. This is what I have 开发者_如何转开发so far...

    $("#checkboxes input").each(function (index, Element)
    {
        $(".defaultTickedStatus").each(function (i2, status)
        {
            if (status.value == Element.value)
            {
                $(status).selected(true);
            }

        });

    });

It's getting to the $(status).selected(true) part but for some reason, it does not seem to work. Also, I'm positive there is a much easier way to do this through Jquery.

Wonder if anyone can help me.

Thanks

You have a couple of problems. Firstly, you are trying to check the wrong elements (the hidden input elements, rather than the checkboxes). To fix that, change status to Element in the if clause. Secondly, what is the selected method? I'm assuming you want to check the checkbox, so you need the checked property:

$("#checkboxes input").each(function (index, Element) {
    $(".defaultTickedStatus").each(function (i2, status) {
        if (status.value == Element.value) {
            Element.checked = true;
            return false;
        }
    });
});

Notice that I've also added return false; to the if clause. That's to break out of the each loop if a match is found, to prevent unnecessary iterations. With the number of checkboxes/hidden inputs you currently have, it won't really make a difference, but I think it's a good habit to get in to.

Also note that you have used the same id value on each of your checkboxes. It's invalid to have duplicate ids so that could cause you problems later on.

Here's a working example of the above code.

Be carefull, you can't have 4 times id="checkbox1". Also, there is no need to have 2 nested .each(function() if you use the selector input[value="foo"]

Here is how you can do it:

$("#clickme").click(function() {
    $(".defaultTickedStatus").each(function() {
        var value = $(this).attr('value');
        $('#checkboxes input[value="'+value+'"]').attr('checked','checked');
    });
});

working jsFiddle

Looks like you are trying to select a hidden tag, instead of the checkbox

First of all, selected() is not part of the jQuery API, you need to use attr('checked', true) at that point.

Second thing is, that iterating over all the hidden fields for every checkbox is quite inefficient, you may want to cache the checked values in an array or object.