Question

Given the following HTML:

<fieldset>
    <legend>
        <input type="checkbox" name="amazon_activated" /> 
    </legend>
    <table>
        <tr>
            <td>
                Amazon Data
            </td>
        </tr>
    </table>
</fieldset>

next code allows hide/show the data container table related to the checkbox:

$("input[name='amazon_activated']").click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

and next code it should init the hide/show state after page’s load:

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $(this).parent("legend").next("table").hide();
}

Well, it is failing.

I already know why: this refers to the page element, not the checkbox element.

---

So I wonder:

Is it the best policy immediately choose an id/class:

$("#id")

for the important elements in order to facilitate their control through jquery, over form-based selectors?:

$("input[name='amazon_activated']")

Answer 1

Thanks to all for your answers. All have been very helpful (I give +1 to all).

I want to add my final solutions that takes in account your tips.

Indeed there are several checkbox elements involved, so I have cached them and use an associative array to iterate over it (avoiding add more id/class).

var checkboxElements = {
    "amazon_activated" : $("input[name='amazon_activated']"),
    "clickbank_activated" : $("input[name='clickbank_activated']"),
    "ebay_activated" : $("input[name='ebay_activated']")
}

$.each(checkboxElements, function(i, el){
    $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    $(el).click(function(){
        $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    });
});