調用從檢查/未檢查輸入HTML一些JavaScript

Question

這裏是我的代碼至今：

http://jsfiddle.net/YBGm4/4/

JAVASCRIPT：

$(function() { 
    $('#world-map').vectorMap({ 
     map: 'world_mill_en', 
     normalizeFunction: 'polynomial', 
     hoverOpacity: 0.9, 
     hoverColor: false, 
     markerStyle: { 
      initial: { 
       fill: '#F8E23B', 
       stroke: '#383f47' 
      } 
     }, 
     backgroundColor: '#000000', 
     zoomMax: 30, 

     <!--DO THIS ON CHECKMARK (so on load)--> 
     /* 
     series: { 
      regions: [{ 
       values: countriesvisited, 
       scale: ['#B1C9C0', '#41a62a'], 
       normalizeFunction: 'polynomial' 
      }] 
     }, 
     */ 
     <!---------------------------> 

     <!--DO THIS ON UNCHECKMARK--> 
     /* 
     series: { 
      regions: [{ 
       values: countriesvisited, 
       scale: ['#B1C9C0'], 
       normalizeFunction: 'polynomial' 
      }] 
     }, 
     */ 
     <!---------------------------> 

     markers: [{ 
      latLng: [49.1840, -123.0110], 
      name: 'Current City: Vancouver' 
     }] 
    }); 
}); 
$(document).ready(function() { 
    $('#myForm').fancyfields(); 
}); 

HTML

<div id="world-map" style="width: 500px; height: 400px"></div> 
<br/> 
<h2>Checkboxes</h2> 
<div id="myForm"> 
    <input id="Checkbox" name="Checkbox" checked="checked" type="checkbox" style="display; none;" /> 
    <label>Countries I have Been To</label> 
</div> 

我有一個複選框對象那裏。當被選中，我想給

和未選中時，根據

兩個代碼對應於/ * * /地區代碼執行的代碼下執行代碼。如果這是有道理的。

我認爲看看代碼它會使我想要做的事情變得有意義。爲了簡單起見，我試圖儘可能去除它。

謝謝！

Answer 1

最簡單的事情就是使用jQuery .on() method。

這樣做會是這個樣子：

$('input[type="checked"]').on('change', function() { 
    if ($(this).is(':checked')) { 
     // When checked, run this 
    } else { 
     // When unchecked, run this 
    } 
}); 

編輯：叉形你JS小提琴給出瞭如何扎入FancyFields複選框改變事件的例子。簡單地看一下更新地圖的問題，但我不確定我是否理解它的工作原理，足以提供更多的信息。這裏是小提琴：http://jsfiddle.net/zQGV3/4/

Answer 2

這是一個可能的解決方案。見的jsfiddle：http://jsfiddle.net/YBGm4/9/

下面是一些註釋代碼，我在你的jQuery的ready事件說：

// First we need to get mapObject to manipulate the map 
// This was shown here: http://jvectormap.com/examples/usa-unemployment/ 
var mapObject = $('#world-map').vectorMap('get', 'mapObject'); 

// Now you need to add change event on your checkboxes. For simplicity, I just 
// did checkbox 1 
// Now you can't use jQuery change event, since you are using `fancyfields` 
// See docs here: http://www.jqfancyfields.com/examples-docs/ 
$("#Checkbox1").fancyfields("bind", "onCheckboxChange", function (input, isChecked){ 
    if (isChecked) { 
     // If the checkbox is checked, we setScale to the original values 
     mapObject.series.regions[0].setScale(['#B1C9C0', '#41a62a']);       
    } else { 
     // If the checkbox is not checked, we setScale to the some other values. 
     // I changed them, because the ones you used weren't showing up clearly. 
     mapObject.series.regions[0].setScale(['#00000', '#ff0000']);    
    } 
}); 

請注意，我只用setScale在這裏，因爲你的地圖區域變化只涉及秤的參數。如果你需要改變區域值，你可以這樣做：mapObject.series.regions[0].setValues(countriesvisited)或其他。

另請注意，我僅舉了一個使用1複選框的示例。我假設你知道如何將邏輯添加到複選框的其餘部分。

編輯2

這是試圖解釋發生了什麼：

首先，你需要直接編輯地圖對象，這意味着你需要從vectorMap類得到它。無論出於何種原因，文檔都沒有解釋這一點。但這就是美國就業的例子。

var mapObject = $('#world-map').vectorMap('get', 'mapObject'); 

既然我們是地圖對象，我們可以更改您設置的系列和區域數據。請再次參考usa-employment示例瞭解它如何工作。此外，console.log可以幫助您查看對象上的方法和屬性。

根據你的配置，你只有一個區域，所以我們可以這樣訪問：

var yourRegion = mapObject.series.regions[0]; 

現在該地區的對象有一定的屬性，您可以檢查使用控制檯：

console.log(yourRegion); 

如果你仔細看，你會發現它有兩種方法可以幫助setScale和setValue。在這種情況下，你只能改變比例，所以我們可以做到以下幾點：

mapObject.series.regions[0].setScale(['#00000', '#ff0000']); 

在您例如，在你只有數組中的顏色值方面，它似乎並沒有對我的工作。也許你需要在數組中超過1個值？

現在另一個問題是與複選框一起工作。您幾乎可以複製jqfancyfields文檔中給出的示例：http://www.jqfancyfields.com/examples-docs/。不幸的是，插件使得默認的jQuery改變事件的複選框不會工作。

下面是語法是什麼樣子：

$("#you-checkbox-element-id").fancyfields("bind", "onCheckboxChange", function (input, isChecked){ 
    if (isChecked) { 
    // Logic for if checked      
    } else { 
    // Logic for if not checked    
    } 
}); 

希望使所有的更清晰零件你。問如果不是。