@Makaroff_93
Начинающий прогер

Как не применять правило для 1 чекбокса внутри нескольких?

Имеется фильтр на сайте, состоящий из чекбоксов.
Внутри него сделан еще один чекбокс, который должен скрывать/раскрывать то, что внутри него (красная кнопка), но он почему-то подчиняется общим правилам. Если я жму на красную кнопку, то автоматически нажимается чекбокс слева от него. Как это убрать? Заранее благодарен за помощь!
5e61f6ff5c51b338867979.jpeg
5e61f726b1a47483845663.jpeg

Код
<ul>
    <li>
        <div class = "promadnproiz">
        <input type="checkbox" name="tall" id="tall" onchange = "showOrHide('tall','post-1691')";>
        <label for="tall">Область промышленности и производства</label>
        <input type="checkbox" id="btn1" class="del"/><label for="btn1" class="del">+</label>
        	<ul>
            	<li>
                	<input type="checkbox" name="tall1" id="tall1">
                	<label for="tall1">Автомобили и транспорт</label>
            	</li>
            	<li>
                	<input type="checkbox" name="tall-2" id="tall-2">
                	<label for="tall-1">Microelectronics & Semiconductor Industry</label>
              		<input type="checkbox" id="btn-2" class="del"/><label for="btn-2" class="del">+</label>
                    <div сlass="msi">
               			<ul>
                 			<li>
                   				<input type="checkbox" name="tall-2-1" id="tall-2-1">
                   				<label for="tall-1">Printed Circuit Board (PCB) & Electronics Manufacturing</label>
                   			</li>
                   			<li>
                      			<input type="checkbox" name="tall-2-2" id="tall-2-2">
                   				<label for="tall-1">Semiconductor Wafer Processing, IC Packaging & Testing</label>
                			</li>
                		</ul>
                   </div>
            <li>
                <input type="checkbox" name="tall-3" id="tall-3">
                <label for="tall-1">Medical Device Manufacturing</label>
            </li>        
            <li>
                <input type="checkbox" name="tall-4" id="tall-4">
                <label for="tall-1">Watchmaking Industry</label>
            </li>          
            <li>
                <input type="checkbox" name="tall-5" id="tall-5">
                <label for="tall-1">Metals & Machine Engineering</label>
            </li>
            <li>
                <input type="checkbox" name="tall-6" id="tall-6">
                <label for="tall-1">Energy, Mining and Natural Resources</label>
            </li>
            <li>
                <input type="checkbox" name="tall-7" id="tall-7">
                <label for="tall-1">Metallography</label>
                <input type="checkbox" id="btn-3" class="del"/><label for="btn-3" class="del">+</label>
              	<div class="metallography">
                  <ul>
                  	<li>
                      	<input type="checkbox" name="tall-7-1" id="tall-7-1">
                		<label for="tall-1">Cleanliness Analysis Workflow</label>
                  	</li>
                    <li>
                      	<input type="checkbox" name="tall-7-2" id="tall-7-2">
                		<label for="tall-1">Metal Working</label>
                  	</li>
                    <li>
                      	<input type="checkbox" name="tall-7-3" id="tall-7-3">
                		<label for="tall-1">Foundries</label>
                  	</li>
                    <li>
                      	<input type="checkbox" name="tall-7-4" id="tall-7-4">
                		<label for="tall-1">Iron and Steel Industry</label>
                  	</li>
              	</ul>
              </div>
              <li>
            <input type="checkbox" name="tall-8" id="tall-8">
            <label for="tall-1">Jewelry Making / Hand Engraving</label>
           	</li>
        </ul>
      </div>
    <li>   
</ul>       

<script>
const nodeArray = (selector, parent=document) => [].slice.call(parent.querySelectorAll(selector));

const allThings = nodeArray('input');

addEventListener('change', e => {
    let check = e.target;

    if(allThings.indexOf(check) === -1) return;

    const children = nodeArray('input', check.parentNode);
    children.forEach(child => child.checked = check.checked);
    
    while(check){
        
        const parent   = (check.closest(['ul']).parentNode).querySelector('input');
        const siblings = nodeArray('input', parent.closest('li').querySelector(['ul']));

        const checkStatus = siblings.map(check => check.checked);
        const every  = checkStatus.every(Boolean);
        const some = checkStatus.some(Boolean);     
        
        parent.checked = every;     
        parent.indeterminate = !every && every !== some;

        check = check != parent ? parent : 0;
    }
})


/*
closest polyfill for ie 


if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest =
  function(s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i,
        el = this;
    do {
      i = matches.length;
      while (--i >= 0 && matches.item(i) !== el) {};
    } while ((i < 0) && (el = el.parentElement));
    return el;
  };
}
*/
</script>

<style>
ul {list-style: none; margin: 5px 20px;}
li {margin: 5px 0;}
  
.del { display: none; }
.del:not(:checked) + label + * { display: none; } /* фактически нужна только одна строка */
  
/* вид CSS кнопки */
.del:not(:checked) + label,
.del:checked + label {
  cursor: pointer;
  display: inline-block;
  color: #fff; /* цвет текста */
  text-decoration: none; /* убирать подчёркивание у ссылок */
  user-select: none; /* убирать выделение текста */
  background: #ed1b2f; /* фон кнопки */
  padding: 0 9px; /* отступ от текста */
  outline: none; /* убирать контур в Mozilla */
  border-radius: 25px;
  float:right;
}
.del:checked + label {
  background: #83827c;
}
a.del:hover { background: #83827c; } /* при наведении курсора мышки */
a.del:active { background: #83827c; } /* при нажатии */
</style>

<script type="text/javascript">
  function showOrHide(tall,cat) {
    tall = document.getElementById(tall);
    cat = document.getElementById(cat);
    if (tall.checked) {
      cat.style.display = "block";
    }
    else cat.style.display = "none";
  }
</script>

<style>
  .post-1691{display:none;}
</style>
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
слишком перемудрил. сделай проще повесь на чекбоксы разные классы, т.е. чекбоксы которые скрывают/раскрывают это один класс, а остальные это другой класс.
далее при выборке const nodeArray = (selector, parent=document) => [].slice.call(parent.querySelectorAll(selector)); выбирай по классу const nodeArray = (selector, parent=document) => [].slice.call(document.getElementsByClassName(selector));
и уже назначай события как назначал
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы