调用从检查/未检查输入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    
    } 
}); 

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