How can I change the property of my css attributes?

Question

I have the following css code :

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

And I would like to modify using javascript the property of the attribute visibility and to set to visible using javascript.

I tried this :

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

But without any effects.

Could you help me please ?

Thank you very much !

Answer 1

Hey the way you are using is incorrect! Use this instead :

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

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

Answer 2

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

Adding the style attribute should solve your problem. Also try using the jQuery way to select the element since you are already using the library

Answer 3

I'm not quite sure what your intent is for the full functionality, but here are my assumptions for your specs:

1. hide the label of any checked checkbox
2. show label of any unchecked checkbox
3. if, the "selectall" checkbox is checked, you should show the labels of the other checkboxes regardless of whether they are checked or not

If that's all true above, then you could handle all this in 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>