Alle Checkboxen markieren

by Jens Grochtdreis

HTML

<form action="/">
    <fieldset id="auswahlfeld_1" class="">
        <legend>Auswahlfeld 1</legend>    
        <input type="checkbox" name="checkall" value="checkall" id="checkall" class="checkall"><label for="checkall">alle Optionen auswählen</label>
        <input type="checkbox" name="check1" value="check1" id="check1"><label for="check1">Option 1</label>
        <input type="checkbox" name="check2" value="check2" id="check2"><label for="check2">Option 2</label>
        <input type="checkbox" name="check3" value="check3" id="check3"><label for="check3">Option 3</label>
        <input type="checkbox" name="check4" value="check4" id="check4"><label for="check4">Option 4</label>
        <input type="checkbox" name="check5" value="check5" id="check5"><label for="check5">Option 5</label>
        <input type="checkbox" name="check6" value="check6" id="check6"><label for="check6">Option 6</label>        
    </fieldset>
    <fieldset id="auswahlfeld_2" class="">
        <legend>Auswahlfeld 2</legend>
        <input type="checkbox" name="checkall_b" value="checkall_b" id="checkall_b" class="checkall"><label for="checkall_b">alle Optionen auswählen</label>
        <input type="checkbox" name="check1_b" value="check1_b" id="check1_b"><label for="check1_b">Option 1</label>
        <input type="checkbox" name="check2_b" value="check2_b" id="check2_b"><label for="check2_b">Option 2</label>
        <input type="checkbox" name="check3_b" value="check3_b" id="check3_b"><label for="check3_b">Option 3</label>
        <input type="checkbox" name="check4_b" value="check4_b" id="check4_b"><label for="check4_b">Option 4</label>
        <input type="checkbox" name="check5_b" value="check5_b" id="check5_b"><label for="check5_b">Option 5</label>
        <input type="checkbox" name="check6_b" value="check6_b" id="check6_b"><label for="check6_b">Option 6</label>
    </fieldset>
</form>

CSS

fieldset {margin-bottom: 30px; overflow: hidden; padding-top: 10px;}
input{margin-right: 10px;clear: both;}
input, label{ float: left;}

body {padding: 20px;font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}

JavaScript

$('.checkall').click(function () {
        $(this).parents('fieldset:eq(0)')
               .find(':checkbox')
               .attr('checked', this.checked);
    });