Search code examples
javascriptjquerycheckboxstruts

Access checkbox element in my form with JQuery


I have the (struts generated) HTML code:

<form accept-charset="utf-8" class="search" method="get" action="facturable/list.action" name="list" id="list">

<div class="fieldset_medium_right">
                            <div class="label">
                                <input type="checkbox" id="list_allSo" value="true" name="allSo">
<input type="hidden" value="true" name="__checkbox_allSo" id="__checkbox_list_allSo"> 

                            </div>
                            <div label""="" class="">
                                <input type="checkbox" id="list_allEnt" value="true" name="allEnt">
<input type="hidden" value="true" name="__checkbox_allEnt" id="__checkbox_list_allEnt"> 

                            </div>
                            <div label""="" class="">
                                <input type="checkbox" id="list_allUA" value="true" name="allUA">
<input type="hidden" value="true" name="__checkbox_allUA" id="__checkbox_list_allUA"> 

                            </div>
                        </div>

</form>

Before my checkboxes were out of the form, I could access them using: $('#__checkbox_allUA') .click( function() {

Now that they are in the form I can't figure out how to access them. I have tried things like form.__checkbox_allUA or form.element('__checkbox_allUA') without success.

Thank you in advance for your help.


Solution

  • From the HTML you posted, let's take the sample below for example:

    <input type="checkbox" id="list_allUA" value="true" name="allUA"> 
    <input type="hidden" value="true" name="__checkbox_allUA" id="__checkbox_list_allUA">
    

    Here is how to select each of the elements:

    $('#list_allUA').....// the checkbox
    $('#__checkbox_list_allUA').... // the associated HIDDEN value
    

    Quite likely, you do not need to attach an event handler to the hidden element but you might want to do so to the checkbox:

    $('#list_allUA').click( function() { .... });
    

    Or, if the checkbox is being dynamically added:

    $(document).on('click', '#list_allUA', function() { ....... });