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=""/>

Your hidden inputs are not checkboxes.

freginold
– freginold

2018-02-13 18:24:30 +00:00
Commented Feb 13, 2018 at 18:24 — freginold
– freginold, Commented Feb 13, 2018 at 18:24

freginold · Accepted Answer · 2018-02-13 18:31:23Z

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.

Collectives™ on Stack Overflow

jQuery checkbox script giving odd results

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related