JQuery - 基于复选框/选择在表单上隐藏/显示项目

Question

我在模态表单中隐藏输入。我同时使用选择下拉列表和复选框。我的代码运行良好，但我想更好地了解我做了什么，因为我还是 JQuery 的新手。

对于复选框，一旦打开模态，代码就可以正常工作，而无需调用该函数，但是要使选择工作，我必须在模态打开后调用代码。我想更好地理解为什么会这样。谢谢！

代码如下：

//select change    
$('#modal-track').on('shown.bs.modal', function() {
  $('#track_type').change(function() {
    if ($('#track_type').val() == 'Source') {
      $('.mfnswitch').show();
    } else {
      $('.mfnswitch').hide();
    }
  });
});


//checkbox change
function valueChanged() {
  if (
    $('.checkboxinput').is(':checked') &&
    $('input[name=budget]').is(':hidden')
  ) {
    $('.hidden').show();
    $('.mfnhide').hide();
  } else if (!$('.checkboxinput').is(':checked') &&
    !$('input[name=budget]').is(':hidden')
  ) {
    $('.hidden').hide();
    $('.mfnhide').show();
  }
  if (!$('.checkboxinput').is(':checked') &&
    $('input[name=sync_budget]').is(':hidden')
  ) {
    $('.hidden').show();
    $('.mfnhide').hide();
  } else if (
    $('.checkboxinput').is(':checked') &&
    !$('input[name=sync_budget]').is(':hidden')
  ) {
    $('.hidden').hide();
    $('.mfnhide').show();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="add_track" id="TrackForm" method="post">
  <div class="form-row ">
    <div class="col-md-3 mb-0">
      <div id="div_id_track_type" class="form-group">
        <label for="track_type" class=" requiredField">
                    Track type<span class="asteriskField">*</span> </label>
        <div class="">
          <select name="track_type" class="track_type select form-control" id="track_type">
            <option value="Source" selected="">Source</option>
            <option value="Library">Library</option>
            <option value="Original Composition">Original Composition</option>

          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row form-row">
    <div class="col-md-2 mb-0 mfnswitch" id="mfnswitch">
      <div class="custom-control custom-switch">
        <div class="form-group">
          <div id="div_id_mfn" class="custom-control custom-checkbox"> <input type="checkbox" name="mfn" class="custom-control-input checkboxinput custom-control-input" onchange="valueChanged()" id="customSwitch1" checked=""> <label for="customSwitch1" class="custom-control-label">
                            MFN
                        </label> </div>
        </div>
      </div>

    </div>
    <div class="col-md-10 mb-0 mfnhide" id="mfnhide">
      <div id="div_id_budget" class="form-group"> <label for="id_budget" class=" requiredField">
                    Budget<span class="asteriskField">*</span> </label>
        <div class=""> <input type="number" name="budget" value="0" class="numberinput form-control" required="" id="id_budget"> </div>
      </div>
    </div>
    <div class="col-md-4 mb-0 hidden" id="hidden">
      <div id="div_id_sync_budget" class="form-group"> <label for="id_sync_budget" class=" requiredField">
                    Sync budget<span class="asteriskField">*</span> </label>
        <div class=""> <input type="number" name="sync_budget" value="0" class="numberinput form-control" required="" id="id_sync_budget"> </div>
      </div>
    </div>
    <div class="col-md-6 mb-0 hidden" id="hidden">
      <div id="div_id_master_budget" class="form-group"> <label for="id_master_budget" class=" requiredField">
                    Master budget<span class="asteriskField">*</span> </label>
        <div class=""> <input type="number" name="master_budget" value="0" class="numberinput form-control" required="" id="id_master_budget"> </div>
      </div>
    </div>
  </div>
  <div class="form-row ">
    <div class="col-md-1 mb-0"> <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit">

    </div>
  </div>
</form>