Select And Unselect All Checkboxes

I'm not able to implement these things,In this page I want to do implement 3 things: 1> By default Apple and Cat will be checked in this page. 2> For Startall all the featur

Solution 1:

Try this

ID in your HTML should be unique.. Try using different id's or classes instead.. I have written the code using the name attribute which is a slow selector..

$(document).ready(function() {
$('[name="apple"], [name="cat"]').prop('checked', true);

$('[name="startall"]').on('click', function() {
    var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
    if (this.checked) {
        $checkboxes.prop({
            checked: true,
            disabled: false
        });
        $('#textbox').val( $(this).attr('data-name'));
    }
    else{
         $checkboxes.prop({
            checked: false
        });
         $('#textbox').val('');
    }
});

$('[name="stopall"]').on('click', function() {
    var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
    if (this.checked) {
        $checkboxes.prop({
            checked: false,
            disabled: true
        });
        $('#textbox').val( $(this).attr('data-name'));
    }
    else{
         $checkboxes.prop({
            disabled: false
        });
        $('#textbox').val('');
    }
});

});​

UPDATED DEMO