从检查/未检查的输入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>

我有一个checkbox对象。当被选中时，我想在下面执行代码

如果未选中该选项，则在

这两个代码都对应于/* */区域中的代码。如果这有意义的话。

我认为看一看代码就会明白我想要做什么。为了简单起见，我尽可能地去掉了它。

谢谢!

Answer 1

这是一个可能的解决方案。请参阅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，因为您的地图区域更改只处理了scale参数。如果您需要更改区域值，您可以这样做：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];

现在，region对象具有一些属性，您可以使用控制台进行检查：

console.log(yourRegion);

如果你仔细观察，你会发现它有两个有用的方法：setScale和setValue。在这种情况下，您只需更改比例，因此我们可以执行以下操作：

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

就你的例子来说，你在数组中只有颜色值，它似乎对我不起作用。也许您需要在数组中有多个值？

现在，另一个问题是如何使用复选框。您几乎可以复制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              
    }
});

希望这能让你对所有的部分都更清楚。如果不是，就问一下。