How do I get the tristate jquery plugin to check the hidden input?

Question

I have been working for a client that is using the tristate jquery plugin and after a bunch of debugging I have found that the hidden input is not showing up:

<ul>
    <li>
        <a href="#" class="checkbox checked">undefined</a>
        <input type="checkbox" style="display: none; " />
        <label for="england" class="checkbox">England</label>
        <span class="toggler opened">&nbsp;</span>
        <ul style="display: block; ">
            <li class="city">
                <a href="#" class="checkbox checked">undefined</a>
                <input type="checkbox" value="leeds" id="cb_leeds" style="display: none; " />
                <label for="cb_leeds" class="checkbox" >Leeds</label>
            </li>
            <li class="city">
                <a href="#" class="checkbox checked">undefined</a>
                <input type="checkbox" value="london" id="cb_london" style="display: none; " />
                <label for="cb_london" class="checkbox checked" >London</label>
            </li>
        </ul>
    </li>
</ul>

I found that in the plugin that they are using they have this in their script:

$('#pf-locations .city input:checked').each(function() {
    cities.push($(this).val());
});

Anyone know how I can get the plugin to check the hidden input? Thanks!

Answer 1

You can try this:

$('#pf-locations .city label.checked').each(function() { // keeping ref of label
    cities.push($(this).prev(':checkbox').val()); // using label ref get input value
});