Question

我写这篇文章时出现的大多数类似问题都是this（用户希望使用纯JS切换元素的类）或this（用户希望切换的地方）使用jQuery的其他属性）

我的问题是两者的混合。我知道el.classList.toggle()方法存在使用纯JS切换元素的类，但我希望使用纯JS切换不同的属性，特别是某些单选按钮的checked属性，因为这（烦人）选择不同的选项时不会改变。

是否可以使用纯JS在我的两个单选按钮上切换checked属性（通过切换我的意思是如果它存在则完全从元素中删除属性，如果不存在则添加它）？ / p>

radios = document.getElementsByName("Floor");
for (i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', function () {
        this.(/*checked attribute*/).toggle()
    }, false);
}

<input checked id="Floor" name="Floor" type="radio" value="0">Ground Floor
<input id="Floor" name="Floor" type="radio" value="1">First Floor

编辑：评论中提到的possible duplicate question并未完全解决我的问题。我不需要更改选中哪个单选按钮，我只想切换checked属性，以便我更容易引用稍后在代码中检查的按钮。当然，如果还有另一种更简单的方法，那我就听见了。

Answer 1

没有用于属性的切换方法。

您可以使用：

elm[elm.getAttribute('hidden')?'removeAttribute':'setAttribute']('hidden', '')

或

elm.getAttribute('hidden') ? removeAttribute('hidden') : setAttribute('hidden')

Answer 2

实际上有一个Element.toggleAttribute方法用于布尔属性。 MDN Docs。

但是，由于尚不支持所有浏览器，因此您可能需要添加MDN Polyfill

Answer 3

这肯定会很好

const attrToggle = (el, attr) => el.getAttribute(attr) == 'false' ? el.setAttribute(attr, "true") : el.setAttribute(
      attr, "false")

它类似于本地toggleAttribute。

Answer 4

我没有对此进行测试，但这应该可以解决问题。

radios = document.getElementsByName("Floor");
  for (i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', function () {
       if ( this.checked ) {
          this.setAttribute("checked", "false");
       } else {
          this.setAttribute("checked", "true");
       }
  }, false);
}

Answer 5

Element.toggleAttribute(name) 用于切换布尔属性 https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

this.toggleAttribute("checked");

如何使用纯JavaScript切换元素的属性？

5 个答案: