Как я могу изменить свойство моих css атрибутов?

Question

У меня есть следующий css код:

input:checked + .selectablelabel .check {
  visibility: hidden;
}

И я хотел бы изменить, используя javascript свойство атрибута видимости, и установить видимым, используя javascript.

Я пробовал это:

$(document).on('click', '#selectlabelall', function () {
document.getElementsByClassName("input:checked + .selectablelabel .check").visibility = "visible";
});

Но без каких-либо эффектов.

Не могли бы вы помочь мне, пожалуйста?

Большое спасибо!

Answer 1

$(document).on('click', '#selectlabelall', function () {
    var ele = document.getElementsByClassName("selectablelabel check")
    var i = 0;
    while(i < ele.length) {
        ele[i].style.visibility = 'hidden'
        i++
    }
});

Добавление атрибута style должно решить вашу проблему. Также попробуйте использовать способ jQuery для выбора элемента, так как вы уже используете библиотеку

Answer 2

Я не совсем уверен, каково ваше намерение для полной функциональности, но вот мои предположения для ваших спецификаций:

1. скрыть метку любого отмеченного флажка
2. показать метка любого непроверенного флажка
3. , если флажок «selectall» установлен, вы должны показывать метки других флажков независимо от того, установлены они или нет

Если это все правда выше, тогда вы можете обработать все это в CSS:

input:checked + .selectablelabel .check {
  visibility: hidden;
}

#selectlabelall:checked ~ .selectablelabel .check {
  visibility: visible;
}

<input type="checkbox" id="selectlabelall">



<input type="checkbox">

<label class="selectablelabel">
  <span class="check">one</span>
</label>


<input type="checkbox">

<label class="selectablelabel">
  <span class="check">two</span>
</label>


<input type="checkbox">

<label class="selectablelabel">
  <span class="check">three</span>
</label>

Answer 3

Эй, как вы используете, это неправильно! Используйте это вместо:

  $(document).on('click', '#selectlabelall', function () {
  let elements = 
 document.getElementsByClassName("input:checked + 
 .selectablelabel .check");

 for(element of elements) {}
      element.style.visibility ="visible":
  }
  );