Ändern der Optionseingänge mit verschiedenen Kontrollkästchen

Question

Ich habe drei Optionen, die ich speziell Kontrollkästchen für, Bronze, Silber und Gold verwenden. Wenn jemand auf eine der Checkbox-Optionen klickt, möchte ich, dass die Ergebnisse in der Auswahl anders sind, basierend auf den Optionen in der entsprechenden if-Anweisung. Dann, sobald diese Person wählt und Option in der Lage sein, den Wert an das HTML zu senden.

Im Moment bekomme ich nur die #top-bronze:checked Optionen erscheinen, egal welche Option ich überprüfe. Dies wird jedoch aus irgendeinem Grund nicht im Snippet angezeigt.

Kann jemand sehen, was ich tun muss, um anhand der überprüften Ergebnisse die richtigen Optionen anzeigen zu können?

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

Answer 1

Surround die Bedingung innerhalb des if-else mit $(). Sie können auch prop überprüfen checked Status Checkbox wie der Schlag first und second Zustand

$(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>