在jQuery的切換方法

Question

保存以前的值我有一個表格，其中用戶能夠選擇招聘廣告的類型，他希望投放廣告的位置。工作廣告價格根據工作機會的類型和地點數量而變化。

一切正常，但有一件事缺失或不工作，例如有一個與FULLPACK價值的複選框，其中基本上如果用戶選擇它收到新的價格（折扣），但當我切換如果用戶不選擇此選項，我需要將價格更新爲之前的價格數字，但無法找出最佳方式。

我的代碼：

var adType; 
var totalprice = 0.0; 
var location; 
var countLocations =1; 

//hide step 2 div 
$('#step2').hide(); 
$('#totalprice').html(totalprice); 
$('.adType').change(function() { 
    //after select one show next step 
    $('#step2').show('slow'); 
    adType = $(this).val(); 
    //var checked = $("#isAgeSelected").is(':checked').val(); 
    console.log(adType); 
    switch(adType) { 
     case "platinum": 
      totalprice = 250.00; 
      $('#totalprice').html(totalprice*countLocations) 
      break; 
     case "gold": 
      totalprice = 125.00; 
      $('#totalprice').html(totalprice*countLocations) 
      break; 
     case "silver": 
      totalprice = 50.00; 
      $('#totalprice').html(totalprice*countLocations) 
      break;   
     default: 
      totalprice = 0.00; 
      $('#totalprice').html(totalprice*countLocations) 
    } 
}); 

$('.location').change(function() { 
    location = $(this).val(); 
    countLocations = $('[name="countrylocation[]"]:checked').length; 
    $('#totalprice').html(totalprice*countLocations); 
    console.log(countLocations); 
    if (location == 'FULLPACK') { 
     $("#allPackage").toggle(function() { 
      $('#totalprice').html("new Price!") 
     });  
    } 
}); 

HTML：

<input class="adType" name="adType" type="radio" value="platinum"> 
<input class="adType" name="adType" type="radio" value="gold"> 
<input class="adType" name="adType" type="radio" value="silver"> 

<div class="col-md-12" id="step2"> 
    <h3>Step 2</h3> 
    <div id="allPackage"> 
     <label class="checkbox"><input checked class="location" name= 
     "countrylocation[]" type="checkbox" value="UK"> UK 
     (default)</label> <label class="checkbox"><input class="location" 
     name="countrylocation[]" type="checkbox" value="SP"> Spain</label> 
     <label class="checkbox"><input class="location" name= 
     "countrylocation[]" type="checkbox" value="IT"> Italy</label> 
    </div><label class="checkbox"><input class="location" name= 
    "countrylocation[]" type="checkbox" value="FULLPACK"> Full Language 
    Package</label> 
</div> 
<div class="col-md-9"> 
    <p>Price: <span id="totalprice"></span> EUR</p> 
</div> 

Answer 1

您應該檢查「FULLPACK」是否真的:checked

使用.toggle()（在你的代碼）：

$('.location').change(function() { 
    location = $(this).val(); 
    countLocations = $('[name="countrylocation[]"]:checked').length; 
    if (location == 'FULLPACK'){ 
     var checked = $(this).is(':checked'); 
     return $("#allPackage").toggle(function(){ 
      $('#totalprice').html(checked ? "new Price!" : (totalprice*countLocations)); 
     }); 
    } 
    $('#totalprice').html(totalprice*countLocations); 
}); 

JSFiddle demo

---

或者使用.slideUp()和.slideDown()：

$('.location').change(function() { 
    location = $(this).val(); 
    countLocations = $('[name="countrylocation[]"]:checked').length; 
    if (location == 'FULLPACK' && $(this).is(':checked')) { 
     return $("#allPackage").slideUp(function(){ 
      $('#totalprice').html("new Price!"); 
     }); 
    }else if (location == 'FULLPACK'){ 
     return $("#allPackage").slideDown(function(){ 
      $('#totalprice').html(totalprice*countLocations); 
     }); 
    } 
    $('#totalprice').html(totalprice*countLocations); 
}); 

JSFiddle demo