獲得更改功能之外的正確選擇

Question

我遇到了一個我完全無法弄清楚的問題。我最初檢查，看看哪些複選框被選中。 （運行控制檯以查看值是否正確）。然後基於選擇，將出現一個新的div以進行適當的初始選擇。一旦你點擊嵌套複選框，控制檯將顯示價格 - 「初始選擇」。

我的代碼段中的代碼完全按照它應該的方式工作，但由於某些原因，在我的實際代碼中，它不會識別第二個事件處理程序$('.check').on('change', function() {內的正確程序包。

例如，如果軟件包1和2是初始選擇，則會出現相應的div，例如在此例中爲#combined，但是一旦複選框被選爲「現在幾點？」，console.log()將僅顯示套餐1.

如果單獨選擇了套餐2，它將顯示正確的div，但在那裏停止... console.log()不會顯示，因爲它不會顯示if else。

即正常工作是，如果包1僅選擇了唯一的選擇。

所以，因爲我能得到的片段工作我的問題是，如果有另一種方式，以確保我的產品變更事件在整個不同的功能和部分...承認自己的變化的功能之外。這是否需要？我沒有其他想法，爲什麼在第二次更改功能，如何正確的產品選擇不被識別。

這是我的實際代碼在控制檯生產...

我有太多的代碼後實際的，但它的結構完全相同的方式。

什麼我能做得到改變功能之外的實際選擇任何想法​​？

var package1 = $('#package1'); 
 
var package2 = $('#package2'); 
 
$('.product').on('change', function() { 
 
    if (package1.is(':checked') && package2.is(':checked')) { 
 
    console.log("Initial - Package 1 & 2"); 
 
    $('#combined').show(); 
 
    $('#pack1-details').hide(); 
 
    $('#pack2-details').hide(); 
 
    } else if (package2.not(':checked') && package1.is(':checked')) { 
 
    console.log("Initial - Package 1"); 
 
    $('#combined').hide(); 
 
    $('#pack2-details').hide(); 
 
    $('#pack1-details').show(); 
 
    } else if (package1.not(':checked') && package2.is(':checked')) { 
 
    console.log("Initial - Package 2"); 
 
    $('#pack2-details').show(); 
 
    } 
 
}); 
 
$('.check').on('change', function() { 
 
    if (package1.is(':checked') && package2.is(':checked')) { 
 
    console.log("Price - Package 1 & 2"); 
 

 
    } else { 
 
    if (package1.is(':checked')) { 
 
     console.log("Price - Package 1"); 
 
    } else if (package2.is(':checked')) { 
 
     console.log("Price - Package 2"); 
 
    } 
 
    } 
 
});

#combined, 
 
#pack1-details, 
 
#pack2-details { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label>Package 1</label> 
 
<input type="checkbox" class="product" id="package1"> 
 
<label>Package 2</label> 
 
<input type="checkbox" class="product" id="package2"> 
 
<div id="combined"> 
 
    <p>Package 1 & 2</p> 
 
    <div class="check"> 
 
    <label>What time is it?</label> 
 
    <input type="checkbox"> 
 
    </div> 
 
</div> 
 
<div id="pack1-details"> 
 
    <p>Package 1 only</p> 
 
    <div class="check"> 
 
    <label>When does Spring start?</label> 
 
    <input type="checkbox"> 
 
    </div> 
 
</div> 
 
<div id="pack2-details"> 
 
    <p>Package 2 only</p> 
 
    <div class="check"> 
 
    <label>Where is Greece?</label> 
 
    <input type="checkbox"> 
 
    </div> 
 
</div>

Answer 1

的變量是不是在你的實際代碼範圍（全球），他們是本地的。就緒。

jQuery(document).ready(function() { 

     // ******** General 
     $('#package-section1').show(); 
     var package1 = $('#package1'); 
     var package2 = $('#package2'); 

將其更改爲：

var package1; 
var package2; 

jQuery(document).ready(function() { 

      // ******** General 
      $('#package-section1').show(); 
      package1 = $('#package1'); 
      package2 = $('#package2'); 

來訪問每個的當前狀態複選框您需要在點擊或改變事件的時間來選擇它，全局變量是在複選框的快照他們被分配的時間。 所以，你需要做這樣的事情：

$('.calendar-check').on('change', function() { 
     var package1 = $('#package1'); 
     var package2 = $('#package2'); 
     // $('input.example').not(this).prop('checked', false); 
     // if (!this.checked || $('.calendar-check:checked').length <= limitCal) { 
     if ($('input.calendar-check').not(this).attr('checked', false)) { 
      $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked); 
      if (package2.prop('checked', false)) { 
       $('#pg-preview-wrap').fadeBoolToggle($('.calendar-check:checked').length > 0); 
       if ($('.calendar-check:checked').length > 0) { 
        $('html, body').animate({ scrollTop: $('#pg-preview-wrap').offset().top }, 800); 
       } 
       else if ($('.calendar-check:checked').length == 0) { 
        $('#next2').hide(); 
       } 
      } 

...