Question

我有三个选项，我专门使用Bronze，Silver和Gold复选框。当有人点击其中一个复选框选项时，我希望根据相应if语句中的选项，select中的结果不同。然后，一旦该人选择并且选项能够将值发送到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

使用$()围绕if-else中的条件。您还可以使用道具来检查复选框的checked状态，例如打击first和second条件

＆＃13;

$(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');
    
  
  })
})

＆＃13;

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

＆＃13;

用不同的复选框选项更改选项输入

1 个答案: