Внесение дополнительных входов с различными вариантами флажков

Question

У меня есть три варианта, которыми я использую флажки для Бронзового, Серебряного и Золотого. Когда кто-то нажимает на одну из опций флажка, я хочу, чтобы результаты в выборе были разными, на основе опций в соответствующем операторе if. Затем, когда этот человек выбирает и имеет возможность отправить значение в html.

Прямо сейчас, я получаю только #top-bronze:checked вариантов, независимо от того, какой вариант я проверяю. Однако по какой-то причине это не показано в фрагменте.

Кто-нибудь видит, что мне нужно для того, чтобы получить правильные параметры для показа на основе проверенных результатов?

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 состояние внутри если-то еще с $(). Вы можете также использовать опору для проверки checked статуса флажка, как удар first и second состояния

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