Dynamically adding checkboxes from multi-select jQuery UI widget

JavaScript
1

I’m using Eric Hynds jQuery MultiSelect Widget that is being populated from a javascript file. I’m trying to dynamically attach a checkbox with the value of the selected checkbox to a ‘Main’ checkbox If a ‘Main’ is checked. When added the value will already be checked, allowing user to uncheck. To help illustrate with comments inside: http://jsfiddle.net/3u7Xj/7/

References:

<select id="select" multiple="multiple" class="multiselect">
</select>
<input type="checkbox" name="chkMain1" value="Main1"
     id="Main1"><label for="Main1">Main1</label><br />
<input type="checkbox" name="chkMain2" value="Main2"
     id="Main2"><label for="Main2">Main2</label><br />
<input type="checkbox" name="chkMain3" value="Main3"
     id="Main3"><label for="Main3">Main3</label><br />

Populating drop down widget from js file:

var MYdata=[{"Value":"1","ValueText":"name1"}
              ,{"Value":"2","ValueText":"name2"}
              ,{"Value":"3","ValueText":"name3"}];

$('#select').html(function(){
   return $.map(MYdata, function(v) {
      return "<option id='"+ v.Value +"'>" + v.Value + "-" + v.ValueText +"</option>";
   }).join('');
});

Concept of dynamically adding checkbox on check/click: http://jsfiddle.net/KPkJn/9/

Any help would be greatly appreciated.

2

this may be useful: jsfiddle.net/uNNMr/2599