Меню с вкладками с флажками: одно меню проверяет другое меню, но не собственное

Question

Я столкнулся с проблемой на сайте, где у меня есть 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.. --> 

HTML для второй вкладки

    <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 --> 

CSS

#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; 
} 

Я заблудился с тем, что я делаю неправильно, и любая помощь, которую может предложить любой человек, будет очень признательна.

Answer 1

Я понял, после того, как возился - поскольку у меня была метка для каждой настройки параметров с тем же именем, это вызывало проблему. После того, как каждый из них уникален, он теперь работает правильно!