Create master checkbox outside {foreach} tag

I have dynamic page under {foreach} tag something like this.

<div id="c1">
{foreach}
<input type="checkbox" name="checkbox" id="{$num}" checked/>
{/foreach}
</div>

which in return prints something like this.

<div id="c1">
<input type="checkbox" name="checkbox1" id="1" checked/>
<input type="checkbox" name="checkbox2" id="2" checked/>
<input type="checkbox" name="checkbox3" id="3" 开发者_StackOverflow社区checked/>
</div>

What I want is to hide <div id="c1"> & show only one checkbox outside <div id="c1">

controlling all checkboxes which are inside <div id="c1">

How can I achieve this ?

Thanks.

• Mandar

You mean something like this?

Try it out: http://jsfiddle.net/3Hjam/ (click the checkbox in the right panel)

HTML

<div id="c1">
    <input type="checkbox" name="checkbox1" id="1" checked />
    <input type="checkbox" name="checkbox2" id="2" checked />
    <input type="checkbox" name="checkbox3" id="3" checked />
</div>
<input type="checkbox" name="master" id="master" checked />

​

jQuery

$('#c1').hide();

$('#master').change(function() {
        // Click the children of c1 when the master is clicked
    $('#c1').children().click();

        // Display the current values in an alert
    var result = $('#c1').children().map(function() {
        return $(this).attr('checked');
    }).get().join(',');

    alert(result);
});