Here is a link to a fiddle showcasing my current project: http://jsfiddle.net/393Yk/
In my layout, I have two columns containing nested unordered lists with numerous checkboxes.
The objective is for the checkboxes in the right column to mirror the selection of checkboxes in the left column - essentially synchronizing their states.
The desired functionality involves only displaying elements on the right side once they have been selected on the left side.
I am encountering an issue where the right hand side checkboxes do not consistently update after the initial selection/unselection process.
The code snippet responsible for handling checkbox manipulation is as follows:
$('.mod-left .wf-check').attr('checked', false).change(function(){
var sel = $(this).data("val");
if( $(this).is(":checked") ){
console.log("Checked " + sel);
$('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked', true);
} else {
console.log("Unchecked " + sel);
$('.mod-right input.wf-check-' + sel + '[type=checkbox]').attr('checked', false);
}
});
I would appreciate any assistance in efficiently selecting and manipulating checkboxes based on their class name. Thank you.