Javascript 保存输入表单后ImageMap颜色的更改

我想创建一个地图，其中的部分根据输入表单上的复选框选择指定颜色。我读到的大部分内容都描述了单击或悬停时改变颜色的可单击图像贴图。这对我的地图来说是不必要的。这样做的目的是在输入表单中保存所选的部分，然后在显示屏上显示不能更改的彩色区域。我想用这个作为疏散地图，让用户知道应该疏散哪些区域

我已经研究过ImageMapster，它可能会很有用，但我还没有弄清楚如何将其合并

这里有几个例子，我想结合使用

jsfiddle.net/jamietre/hD6bM/

jsfiddle.net/BH79/xqaFX/

---

同样，我真正需要的是带有复选框选项的基本表单，它在保存时用颜色更新地图选择。谢谢你的帮助

如果您需要使用imagemap，并且可以使用实际上相当不错的imagemapster，那么您可以执行以下操作：

工作示例：

HTML

为每个复选框指定一个唯一的标识符，这样您就可以知道在本例中要突出显示哪个地图区域的id值为华盛顿。 为每个区域指定相同的标识符，我刚才使用了imagemapster示例附带的默认完整属性。 jQuery

在地图上启用imagemapster并禁用默认高亮显示和区域选择

$('img').mapster({
    isSelectable: false,
    highlight: false
});

为单击的地图区域创建样式只是一个示例，有关不同的可能性，请参见

clickedOptions = {
    fill: true,
    fillColor: '00ff00',
    stroke: true,
    strokeColor: '000000',
    strokeWidth: 1
};

单击复选框时切换新样式

$('.checkbox').toggle(function () {
    $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions); // Clicked fill
}, function () {
    $("[full='" + $(this).attr('id') + "']").mapster('set', false); // Back to no fill
});

这只是一个例子。。。可能有更好的方法来定位元素，但这完全取决于代码的其余部分最终如何工作

编辑

刚刚注意到我误读了你的问题，上面的复选框只是为了勾选一下。如果希望仅在表单提交后更新映射，则可以将上述代码修改为类似以下内容：

// On submit highlight selected areas.
$( "form" ).submit(function( event ) {
    $('.checkbox').each(function(i, obj) {
        if ($(this).is(':checked')) {
            $("[full='" + $(this).attr('id') + "']").mapster('set', true, clickedOptions);
        } else {
            $("[full='" + $(this).attr('id') + "']").mapster('set', false);
        }
    });
  event.preventDefault();
});

---

下面是另一个工作示例：

感谢您的精彩建议！