javascript - Check all other checkboxes when one is checked

Question

I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them looks like this (part of the form):

<div id="ScrollCB">
    <input type="checkbox" name="ALL" value="checked" checked="checked">
    All (if nothing selected, this is default) <br>
    <c:forEach items="${serviceList}" var="service">
       <input type="checkbox" name="${service}" value="checked"> ${service} <br>
    </c:forEach>
</div>

What I want to do is control, whether the checkbox labeled "ALL" is checked and if yes - check all other checkboxes (and when unchecked, uncheck them all).

I tried doing this with javascript like this (found some tutorial), but it doesnt work (and Im real newbie in javascript, no wonder):

<script type="text/javascript">
  $ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
  $(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>

Could you tell me some simple approach how to get it work? Thanks a lot!

Answer 1

demo

updated_demo

HTML:

<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">

    <label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox4</label><br />

</div>

JS:

$('.selectall').click(function() {
    if ($(this).is(':checked')) {
        $('div input').attr('checked', true);
    } else {
        $('div input').attr('checked', false);
    }
});