Changing option inputs with different checkbox choices

Question

I have three choices that I am specifically using checkboxes for, Bronze, Silver, and Gold. When someone clicks on one of the checkbox options, I am wanting the results in the select to be different, based on the options in the appropriate if statement. Then once that person chooses and option to be able to send the value to the html.

Right now, I am only getting the

#top-bronze:checked

options appearing, no matter which option I check. However, this isn't showing in the snippet for some reason.

Does anyone see what I need to do to be able to get the correct options to show based on the checked results?

    function tpYears() {



      if ('#tp-bronze:checked') {

        $("#tp-frequency").html("<option value=''disabled selected>Please choose option</option><option value='3'>3 years - 3 cards</option><option value='4'>2 years - 4 cards</option><option value='2'>5 years - 2 cards</option>");

      } else if ('#tp-silver:checked') {

        $("#tp-frequency").html("<option value=''disabled selected>Please choose option</option><option value='5'>3 years - 5 cards</option><option value='3'>5 years - 3 cards</option><option value='2'>7 years - 2 cards</option>");

      } else if ('#tp-gold:checked') {

        $("#tp-frequency").html("<option value=''disabled selected>Please choose option</option><option value='7'>3 years - 7 cards</option><option value='4'>5 years - 4 cards</option><option value='3'>7 years - 3 cards</option>");

      }

      var templates = $('#tp-frequency option:selected');

    };

    tpYears();

<label for="tp-bronze" class="package-check-toggle tp-package-push">Bronze

</label>

<input type="checkbox" class="tp-pack-check" id="tp-bronze" value="Bronze Touch Point Package">

<label for="tp-silver" class="package-check-toggle tp-package-push">Silver

</label>

<input type="checkbox" class="tp-pack-check" id="tp-silver" value="Silver Touch Point Package">

<label for="tp-gold" class="package-check-toggle tp-package-push">Gold

</label>

<input type="checkbox" class="tp-pack-check" id="tp-gold" value="Gold Touch Point Package">

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Surround the condition within the if-else with $(). You can also use prop to check the checked status of checkbox like the blow first and second condition

$(function(){
  $('input[type="checkbox"]').on('change', function() {
        if ($('#tp-bronze').prop('checked')) {
        $("#tp-frequency").html("<option value=''disabled selected>Please choose option</option><option value='3'>3 years - 3 cards</option><option value='4'>2 years - 4 cards</option><option value='2'>5 years - 2 cards</option>");
      } else if ($('#tp-silver').prop('checked')) {
        $("#tp-frequency").html("<option value=''disabled selected>Please choose option</option><option value='5'>3 years - 5 cards</option><option value='3'>5 years - 3 cards</option><option value='2'>7 years - 2 cards</option>");
      } else if ($('#tp-gold:checked')) {
        $("#tp-frequency").html("<option value=''disabled selected>Please choose option</option><option value='7'>3 years - 7 cards</option><option value='4'>5 years - 4 cards</option><option value='3'>7 years - 3 cards</option>");
      }
      var templates = $('#tp-frequency option:selected');
    
  
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="tp-bronze" class="package-check-toggle tp-package-push">Bronze
</label>
<input type="checkbox" class="tp-pack-check" id="tp-bronze" value="Bronze Touch Point Package">
<label for="tp-silver" class="package-check-toggle tp-package-push">Silver
</label>
<input type="checkbox" class="tp-pack-check" id="tp-silver" value="Silver Touch Point Package">
<label for="tp-gold" class="package-check-toggle tp-package-push">Gold
</label>
<input type="checkbox" class="tp-pack-check" id="tp-gold" value="Gold Touch Point Package">
<select id="tp-frequency"></select>

Changing option inputs with different checkbox choices

Sign up