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

【问题标题】：How can I toggle an element's attributes using pure JavaScript?如何使用纯 JavaScript 切换元素的属性？
【发布时间】：2018-01-01 23:40:29
【问题描述】：

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

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

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

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

编辑： cmets 中提到的possible duplicate question 并不能完全解决我的问题。我不需要更改显示为选中的单选按钮，我只想切换checked 属性，以便我更轻松地引用稍后在代码中选中的按钮。当然，如果有其他更简单的方法可以做到这一点，我会全力以赴。

【问题讨论】：

W3Schools Element.setAttribute() MDN Element.setAttribute()
另见 - DOM .removeAttribute()。由于“切换”不存在，您可以轻松创建一个函数来执行此操作。
您为两个元素提供了相同的 ID。那是无效的。它们可以具有相同的名称，但 ID 是唯一的。
Javascript toggle checkbox的可能重复
@Amy 实际上我只是从 ChromeDev 工具中复制了这些行。实际上，我使用的是 MVC，这些元素是由 Html.RadioButton 生成的，它似乎会自动为两者分配相同的 id。无论如何，我认为这与我的问题无关

标签： javascript html

【解决方案1】：

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

this.toggleAttribute("checked");

【讨论】：

【解决方案2】：

~~属性没有切换方法。~~

你可以使用：

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

或

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

编辑：现在有属性的切换方法。

elm.toggleAttribute('hidden')

https://developer.mozilla.org/docs/Web/API/Element/hasAttribute

【讨论】：

使用“hasAttribute”检查属性是否定义

【解决方案3】：

这肯定会很好用

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

类似于原生toggleAttribute。

【讨论】：

【解决方案4】：

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

但是，由于 IE 不支持，您可能需要添加 MDN Polyfill

【讨论】：

【解决方案5】：

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

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);
}

【讨论】：