Html 带复选框的选项卡式菜单：一个菜单正在选中另一个菜单'；s、 但不是它自己的

我在一个网站上遇到了一个问题，我在一个页面中有3个不同的选项卡，它们的顶部都有相同的菜单，包括复选框。它的目的是为搜索检查某些过滤器。复选框的样式更像单选按钮，但功能与普通复选框相同

在第一个选项卡上，它按预期工作-选中它将显示选中的图像。当有人选择其他选项卡时，它会隐藏当前活动选项卡的内容，并显示所选选项卡的内容。但是，其他选项卡中的任何复选框最终都会选中第一个选项卡中的复选框，如果单击返回到第一个选项卡，我可以看到第一个选项卡中的复选框。不过，我实际单击的另一个选项卡中的复选框看起来没有选中

我已经尝试用CSS非常明确地定位目标，无论我使用选择器多长时间或多长时间，我都无法应用：checked规则。其他一切正常-我可以删除样式并对其他选项卡中的复选框执行其他操作。无法获取要应用的：选中状态。有人知道我做错了什么吗？下面是一些代码，例如：

HTML-第一个选项卡清单的一部分，包括复选框

                    <div id="active_deals" class=""> 
                    <div class="sector_filters_wrapper">
                        <ul class="sector_filters1">
                            <li>
                                <input type="checkbox" id="commerce" name="commerce" />
                                <label for="commerce"><span></span>Commerce & Industry</label>
                            </li>
                            <li>
                                <input type="checkbox" id="consumergoods" name="consumergoods" />
                                <label for="consumergoods"><span></span>Consumer Goods</label>
                            </li>
                            <li>
                                <input type="checkbox" id="energy" name="energy" />
                                <label for="energy"><span></span>Energy</label>
                            </li>
                            <li>
                                <input type="checkbox" id="financial" name="financial" />
                                <label for="financial"><span></span>Financial</label>
                            </li>
                        </ul>
                        <ul class="sector_icons1">
                            <li>
                                <img align="center" src="images/sector/commerceicon.png" />
                            </li>
                            <li>
                                <img align="center" src="images/sector/consumergoodsicon.png" />
                            </li>
                            <li>
                                <img align="center" src="images/sector/energyicon.png" />
                            </li>
                            <li>
                                <img align="center" src="images/sector/financialicon.png" />
                            </li>
                        </ul>
                        <ul class="sector_filters2">
                            <li>
                                <input type="checkbox" id="healthcare" name="healthcare" />
                                <label for="healthcare"><span></span>Healthcare</label>
                            </li>
                            <li>
                                <input type="checkbox" id="materials" name="materials" />
                                <label for="materials"><span></span>Materials</label>
                            </li>
                            <li>
                                <input type="checkbox" id="services" name="services" />
                                <label for="services"><span></span>Services</label>
                            </li>
                            <li>
                                <input type="checkbox" id="technology" name="technology" />
                                <label for="technology"><span></span>Technology</label>
                            </li>
                        </ul>
<!-- The code continues to close out the div, etc.. -->

---

我对我所做的错事感到迷茫，任何人能提供的任何帮助都将不胜感激。

经过修补，我找到了答案——因为我为每个选项设置了相同名称的标签，这导致了问题的发生。在将每一个更改为唯一后，它现在可以正常工作了

你能安装一个上面有a的JSFIDLE吗？

                    <div id="all_deals" class=""> 
                    <div class="sector_filters_wrapper">
                        <ul class="sector_filters1">
                            <li>
                                <input type="checkbox" id="commerce" name="commerce" />
                                <label for="commerce"><span></span>Commerce & Industry</label>
                            </li>
                            <li>
                                <input type="checkbox" id="consumergoods" name="consumergoods" />
                                <label for="consumergoods"><span></span>Consumer Goods</label>
                            </li>
                            <li>
                                <input type="checkbox" id="energy" name="energy" />
                                <label for="energy"><span></span>Energy</label>
                            </li>
                            <li>
                                <input type="checkbox" id="financial" name="financial" />
                                <label for="financial"><span></span>Financial</label>
                            </li>
                        </ul>
                        <ul class="sector_icons1">
                            <li>
                                <img align="center" src="images/sector/commerceicon.png" />
                            </li>
                            <li>
                                <img align="center" src="images/sector/consumergoodsicon.png" />
                            </li>
                            <li>
                                <img align="center" src="images/sector/energyicon.png" />
                            </li>
                            <li>
                                <img align="center" src="images/sector/financialicon.png" />
                            </li>
                        </ul>
                        <ul class="sector_filters2">
                            <li>
                                <input type="checkbox" id="healthcare" name="healthcare" />
                                <label for="healthcare"><span></span>Healthcare</label>
                            </li>
                            <li>
                                <input type="checkbox" id="materials" name="materials" />
                                <label for="materials"><span></span>Materials</label>
                            </li>
                            <li>
                                <input type="checkbox" id="services" name="services" />
                                <label for="services"><span></span>Services</label>
                            </li>
                            <li>
                                <input type="checkbox" id="technology" name="technology" />
                                <label for="technology"><span></span>Technology</label>
                            </li>
                        </ul>
<!-- this code also continues, similarly to the first one -->

#active_deals .sector_filters1 input[type="checkbox"], #active_deals .sector_filters2 input[type="checkbox"] {
    display:none;
}

#active_deals .sector_filters1 input[type="checkbox"] + label span, #active_deals .sector_filters2 input[type="checkbox"] + label span {
    display:inline-block;
    width:6px;
    height:6px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/check_radio_sheet.png') left top no-repeat;
    cursor:pointer;
    margin-right:12px;
}

#active_deals .sector_filters1 input[type="checkbox"]:checked + label span, #active_deals .sector_filters2 input[type="checkbox"]:checked + label span {
    background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}


#active_deals .sector_filters1 li label input[type="checkbox"], #active_deals .sector_filters2 li label input[type="checkbox"] {
    display:inline-block;
    width:6px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/check_radio_sheet.png') left top no-repeat;
    cursor:pointer;
    margin-right:12px;
}

#active_deals .sector_filters1 li label input[type="checkbox"]:checked, #active_deals .sector_filters2 li label input[type="checkbox"]:checked {
    background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}



#all_deals .sector_filters1 input[type="checkbox"], #all_deals .sector_filters2 input[type="checkbox"] {
    display:none;
}

#all_deals .sector_filters1 input[type="checkbox"] + label span, #all_deals .sector_filters2 input[type="checkbox"] + label span {
    display:inline-block;
    width:6px;
    height:6px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/check_radio_sheet.png') left top no-repeat;
    cursor:pointer;
    margin-right:12px;
}

#all_deals .sector_filters1 input[type="checkbox"]:checked + label span, #all_deals .sector_filters2 input[type="checkbox"]:checked + label span {
    background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}


#all_deals .sector_filters1 li label input[type="checkbox"], #all_deals .sector_filters2 li label input[type="checkbox"] {
    display:inline-block;
    width:6px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/check_radio_sheet.png') left top no-repeat;
    cursor:pointer;
    margin-right:12px;
}

#all_deals .sector_filters1 li label input[type="checkbox"]:checked, #all_deals .sector_filters2 li label input[type="checkbox"]:checked {
    background:url('../images/check_radio_sheet.png') -10px top no-repeat;
}