Html 影响其他表单的复选框

我已经彻底搜索了google和stackoverflow来寻找这个问题的答案，但我自己似乎无法找到这个答案

我在网站每一页的底部都有一个表格，用户可以在那里订阅时事通讯。有多个新闻稿选项，因此表单有一个复选框。在同一页上，我有一个弹出窗口，它也邀请用户订阅时事通讯。它是连接到同一邮件列表的相同表单。（参数必须相同，才能连接到同一邮件列表）

这些复选框对页脚中的表单非常有效，但是当尝试单击弹出的复选框时会出现问题。当我单击弹出复选框时，它会选中页脚中的姊妹复选框，但它仍然未选中。这可能只是一个视觉上的问题，但我需要以任何一种方式修复它

这是代码：（这是一个mailchimp表单）

向我发送有关以下内容的信息：
亚利桑那州
内华达州

---

我尝试过重命名css类，看看这是否能解决问题，但这种行为仍然存在。如果您有任何想法，我们将不胜感激。

事实证明，问题是我的表单没有唯一的名称和ID。当然，对于mailchimp表单，这是一个问题，因为您无法控制简单HTML mailchimp表单的名称和ID。在正常情况下，如果您使用的是简单的html mailchimp表单，那么一个页面上不能有两个表单

然而，如果你把你的表格放在一个iframe中，你可以绕过这个问题。您的浏览器将其作为完全唯一的表单加载，从而避免了相同的名称/ID问题

摘要

---

如果您想在同一页面上使用多个mailchimp表单（即使是在弹出窗口中），请将它们包含在iFrame中以避免出现问题。

您可以发布一些代码或JSFIDLE吗？是-添加了示例和代码。谢谢！：）确保他们有唯一的名称和ID他们是否可以在mailchimp上提交相同的列表时有唯一的名称和ID？名称和ID由mailchimp分配。我想这可能就是问题所在。如果有人有办法解决这个问题，我很乐意尝试。如果有人感兴趣。。。在mailchimp注册表单的范围内，我可能需要将两个表单中的一个放在iframe中，以避免一页两个表单的问题。

<div id="mc_embed_signup">
<form action="http://myaction" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group">
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name" required>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name" required>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address" required>
</div>
<div class="mc-field-group input-group">
<div class="explain"><strong>Send me information about:</strong></div>
<div class="options"><input type="checkbox" value="1" name="group[88888888][1]" id="mce-group[88888888]-88888888-0" class="css-checkbox"><label for="mce-group[88888888]-88888888-0" class="css-label side">Arizona</label>
<input type="checkbox" value="2" name="group[88888888][2]" id="mce-group[88888888]-88888888-1" class="css-checkbox"><label for="mce-group[88888888]-88888888-1" class="css-label side">Nevada</label></div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="216818354ab65ad5465ad554ad585" value=""></div>
</form>
</div>