jQuery hidden checkbox value

Question

I'm trying to set this the way if "marketingAAA" is checked as true, a hidden checkbox "marketingPhone" is set as TRUE as well. This works.

However, if any other checkbox on the page is set to be TRUE, then it still goes TRUE for "marketingPhone". Can't figure this out why. It should stay as FALSE if "marketingAAA" is not checked TRUE. Does anyone see the issue?

$(function() {
      var marketingAAA= $("input[type='checkbox']");
      var marketingPhone = $("input[type='hidden'][name='marketingPhone']");

    marketingAAA.on('change', function()
            {
            if ($(this).val() == "TRUE")  {
              marketingPhone.prop('checked',true);
              marketingPhone.val('TRUE');

    } else {
              marketingPhone.prop('checked',false);
              marketingPhone.val('FALSE');

     }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="marketingrules" name="marketingBBB" type="checkbox" class="radio-button-input" value="TRUE">

 <input id="marketing" name="marketingAAA" type="checkbox" class="radio-button-input" value="TRUE">

<input type="hidden" name="marketingPhone" value=""/>

var marketingAAA= $("input[type='checkbox']"); is the issue here. You now select all checkboxes. — rolfv1
– rolfv1, Commented Jan 19, 2018 at 11:37
Why don't you use $("#marketing") and $("#marketingrules")? — fen1x
– fen1x, Commented Jan 19, 2018 at 11:38
if marketingPhone directly depends on marketingAAA, you can make use of marketingAAA value itself. — Bharadwaj
– Bharadwaj, Commented Jan 19, 2018 at 11:49

imanshu15 · Accepted Answer · 2018-01-19 11:38:42Z

2

In your function you should specify 'marketAAA'.

var marketingAAA= $("input[type='checkbox'][name='marketingAAA']");

Right now it checks all the checkboxes and if one is true it will check 'marketingPhone'.

$(function() {
  var marketingAAA= $("input[type='checkbox'][name='marketingAAA']");
  var marketingPhone = $("input[type='hidden'][name='marketingPhone']");

marketingAAA.on('change', function()
        {
        if ($(this).val() == "TRUE")  {
          marketingPhone.prop('checked',true);
          marketingPhone.val('TRUE');

} else {
          marketingPhone.prop('checked',false);
          marketingPhone.val('FALSE');

 }
    });
});

answered Jan 19, 2018 at 11:38

imanshu15

7644 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2018-01-19 11:38:18Z

The problem is because you're selecting all the [type="checkbox"] elements. To fix this select the marketingAAA element only.

Note that in the example below I changed the hidden element to a text so that the effect is more easily visible. I also removed your setting of the checked property, as a hidden input does not have that.

$(function() {
  var $marketingAAA = $("#marketing");
  var $marketingPhone = $("input[name='marketingPhone']");

  $marketingAAA.on('change', function() {
    $marketingPhone.val(this.checked ? 'TRUE' : 'FALSE');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="marketingrules" name="marketingBBB" type="checkbox" class="radio-button-input" value="TRUE">

<input id="marketing" name="marketingAAA" type="checkbox" class="radio-button-input" value="TRUE">
<input type="text" name="marketingPhone" value="" />

Jordi Flores · Accepted Answer · 2018-01-19 11:39:01Z

1

set this var correctly

var marketingAAA= $("#marketing");

answered Jan 19, 2018 at 11:39

Jordi Flores

2,15012 silver badges17 bronze badges

Comments

Ivo Silva · Accepted Answer · 2018-01-19 11:42:14Z

1

The problem is when you define the variable marketingAAA in the script:

var marketingAAA= $("input[type='checkbox']");

In this way you are selecting all the checkboxes in the page, but you only want the marketingAAA.

So instead of selecting all checkboxes try to get the element by it's id:

var marketingAAA= $("#marketing");

Or by it's name like you did in the line after:

var marketingAAA = $("input[type='checkbox'][name='marketingAAA']");

Do remember that IDs in html should be unique!

answered Jan 19, 2018 at 11:42

Ivo Silva

3672 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery hidden checkbox value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related