Question

Is there any way I can achieve this functionality, I have select all type of checkbox which selects all the check box inside class multicheckBox2, I can toggle those check boxes based on select all. Now my each check boxes inside class multicheckBox has their own events which shows or hides a group of other elements and set their values. say one of my check box is #expense-RentInclusiveOf-Electricity. Now my problem is that when I check the select all I want to trigger the function toggleElectricity() automatically but this is not happening since $("#expense-RentInclusiveOf-Electricity").click(function() on click event which is not binded is there any way I could change the event .click to something else and make this possible?

$("#expense-RentAllUtilites-All").click(function(){
    var status = $(this).attr('checked')?true:false;        
    toggleAllRentals(status);
});

function toggleAllRentals(status) {
    $(".multiCheckBox2 input").each( function() {
        $(this).attr("checked",status);
    });
}

$("#expense-RentInclusiveOf-Electricity").click(function(){       
    toggleElectricity(this);
});

function toggleElectricity($this){
    if($($this).is(':checked')) {
        $("#expense-Electricity").val('0');
        $(".electricity").hide();
    } else {
        $("#expense-Electricity").val('50');
        $(".electricity").show();
    };
}

Answer 1

Try the change event:

$("#expense-RentInclusiveOf-Electricity").change(function() {

});