如何更改我的 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 () {
  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++
    }
});

添加style属性应该可以解决您的问题。 也尝试使用 jQuery 方式来选择元素，因为您已经在使用该库

Answer 3

我不太确定您对完整功能的意图是什么，但这是我对您的规格的假设：

1. 隐藏任何选中复选框的标签
2. 显示任何未选中复选框的标签
3. 如果选中“全选”复选框，则无论是否选中，都应显示其他复选框的标签

如果以上都是正确的，那么您可以在 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>