jQuery checkbox script giving odd results

Question

Script is supposed to check all hidden checkboxes when the main checkbox attribute is checked as TRUE. If it's left unchecked, or if user checks/unchecks, the same value should be applied for the hidden attributes.

It works fine 90% of times, but it seems in some cases (not sure how yet) it doesnt work, and some results come in where user has main checkbox as TRUE but all others as FALSE, and vice-versa.

Why does it happen?

 <script>      
             $(function() {
             var marketingMAIN= $("input[type='checkbox'][name='marketingMAIN']");
             var marketingPhone = $("input[type='hidden'][name='marketingPhone']");
             var marketingRobo = $("input[type='hidden'][name='marketingRobo']");
             var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
             var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
             var marketingIM = $("input[type='hidden'][name='marketingIM']");
             var marketingPush = $("input[type='hidden'][name='marketingPush']");
             var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");

             marketingMAIN.on('change', function()
               {
               if ($(this).val() == "TRUE")  {
                 marketingPhone.prop('checked',true);
                 marketingPhone.val('TRUE');
                 marketingRobo.prop('checked',true);
                 marketingRobo.val('TRUE');
                 marketingSMS.prop('checked',true);
                 marketingSMS.val('TRUE');
                 marketingEmail.prop('checked',true);
                 marketingEmail.val('TRUE');
                 marketingIM.prop('checked',true);
                 marketingIM.val('TRUE');
                 marketingPush.prop('checked',true);
                 marketingPush.val('TRUE');
                 marketingPaperMail.prop('checked',true);
                 marketingPaperMail.val('TRUE');
               } else {
                 marketingPhone.prop('checked',false);
                 marketingPhone.val('FALSE');
                 marketingRobo.prop('checked',false);
                 marketingRobo.val('FALSE');
                 marketingSMS.prop('checked',false);
                 marketingSMS.val('FALSE');
                 marketingEmail.prop('checked',false);
                 marketingEmail.val('FALSE');
                 marketingIM.prop('checked',false);
                 marketingIM.val('FALSE');
                 marketingPush.prop('checked',false);
                 marketingPush.val('FALSE');
                 marketingPaperMail.prop('checked',false);
                 marketingPaperMail.val('FALSE');
               }
             });
             });
          </script>

The hidden attributes are marked as follows:

           <input type="hidden" name="marketingPhone" value=""/>
           <input type="hidden" name="marketingRobo" value=""/>
           <input type="hidden" name="marketingSMS" value=""/>
           <input type="hidden" name="marketingEmail" value=""/>  
           <input type="hidden" name="marketingIM" value=""/>
           <input type="hidden" name="marketingPush" value=""/>
           <input type="hidden" name="marketingPaperMail" value=""/>

Answer 1

The value won't change for a checkbox unless you specifically change it. Try using is() like in this answer.

Instead of checking the visible checkbox's value in your change listener like this:

if ($(this).val() == "TRUE")  {

Check its checked attribute:

if ($(this).is(":checked")) {

Here's a working example:

$(function() {
  var marketingMAIN = $("input[type='checkbox'][name='marketingMAIN']");
  var marketingPhone = $("input[name='marketingPhone']");
  var marketingRobo = $("input[name='marketingRobo']");
  var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
  var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
  var marketingIM = $("input[type='hidden'][name='marketingIM']");
  var marketingPush = $("input[type='hidden'][name='marketingPush']");
  var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");

  marketingMAIN.on('change', function() {
    if ($(this).is(":checked")) {
      marketingPhone.prop('checked', true);
      marketingPhone.val('TRUE');
      marketingRobo.prop('checked', true);
      marketingRobo.val('TRUE');
      marketingSMS.prop('checked', true);
      marketingSMS.val('TRUE');
      marketingEmail.prop('checked', true);
      marketingEmail.val('TRUE');
      marketingIM.prop('checked', true);
      marketingIM.val('TRUE');
      marketingPush.prop('checked', true);
      marketingPush.val('TRUE');
      marketingPaperMail.prop('checked', true);
      marketingPaperMail.val('TRUE');
    } else {
      marketingPhone.prop('checked', false);
      marketingPhone.val('FALSE');
      marketingRobo.prop('checked', false);
      marketingRobo.val('FALSE');
      marketingSMS.prop('checked', false);
      marketingSMS.val('FALSE');
      marketingEmail.prop('checked', false);
      marketingEmail.val('FALSE');
      marketingIM.prop('checked', false);
      marketingIM.val('FALSE');
      marketingPush.prop('checked', false);
      marketingPush.val('FALSE');
      marketingPaperMail.prop('checked', false);
      marketingPaperMail.val('FALSE');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="marketingMAIN" value="" />
<input type="hidden" name="marketingPhone" value="" />
<input type="hidden" name="marketingRobo" value="" />
<input type="hidden" name="marketingSMS" value="" />
<input type="hidden" name="marketingEmail" value="" />
<input type="hidden" name="marketingIM" value="" />
<input type="hidden" name="marketingPush" value="" />
<input type="hidden" name="marketingPaperMail" value="" />

Change any of the checkboxes from type="hidden" to type="checkbox" and you can see them check and uncheck depending on what your main checkbox does.