I have 4 checkboxes and I wish to toggle them (checked or unchecked) and they should all be the same what ever state they are in. I have this so far:

var toggle_click = false;

function check_them(element){

    if(toggle_click){
        $('#'+element+'_1').attr('checked', true);
        $('#'+element+'_2').attr('checked', true);
        $('#'+element+'_3').attr('checked', true);
        $('#'+element+'_4').attr('checked', true);
    }

    if(!toggle_click){
        $('#'+element+'_1').attr('checked', false);
        $('#'+element+'_2').attr('checked', false);
        $('#'+element+'_3').attr('checked', false);
        $('#'+element+'_4').attr('checked', false);
    }

    if(!toggle_click){ toggle_click = true;   }
    if(toggle_click) { toggle_click = false;  }
}

On page load some of the checkboxes may be ticked or not ticked - but once I click a link and run this function, I want these checkboxes to go all to the same state.

When I try the above, it just doesn't seem to tick the boxes and sometimes it ticks them all and running this function again does nothing. What is going on? I am coffee deprived and confused!

Should be making use of a checkbox group or something?

Thanks all for any help

Edit
Report