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

Question

在我撰写此问题时，类似的问题多数如这个（用户希望使用纯JS切换元素的类）或这个（用户希望使用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

编辑： 评论中提到的可能重复的问题并不能完全解决我的问题。我不需要更改哪个单选按钮被选中，我只想切换checked属性，以便于后面在代码中引用被选中的按钮。当然，如果有其他更简单的方法，我会听取建议。

- murchu27

---

W3Schools Element.setAttribute() MDN Element.setAttribute() - Patrick Barr

您给了两个元素相同的ID。这是无效的。它们可以有相同的名称，但ID必须是唯一的。 - user47589

可能是Javascript切换复选框的重复问题。 - fredtantini

@Amy 我只是从ChromeDev工具中复制了这些行。实际上，我正在使用MVC，并且这些元素是由Html.RadioButton生成的，它似乎会自动分配相同的id给两个元素。无论如何，我认为这与我的问题无关。 - murchu27

@evolutionxbox 我相信您正在回答我的问题：您的意思是说JavaScript中没有类似于 el.classList.toggle() 的内置函数来执行我要查找的操作吗？那么我需要编写另一个函数来实现吗？ - murchu27

Answer 1

实际上，对于布尔属性，有一个名为Element.toggleAttribute的方法。参见MDN文档。

然而，由于IE不支持该方法，您可能需要添加MDN Polyfill来解决此问题。

- Mendy

Answer 2

there is no toggle method for attribute.

您可以使用以下方法：

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

- Yukulélé

---

使用 " hasAttribute " 来检查属性是否已定义。 - Jimmy Collazos

Answer 3

这肯定会很好地发挥作用。

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

这类似于本地的toggleAttribute。

- M. Inam

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

- Nicolay Hekkens

Answer 5

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

this.toggleAttribute("checked");

- muthukumaran murugaiyan

Answer 6

如果有人偶然看到这个问题，自2017年以来，评论或回答中似乎没有人注意到楼主对他们试图“切换”的checked元素属性真实性质的错误假设。由于迄今为止已经有超过19k次查看了这篇文章，因此这里是您可能真正需要的信息：

<input type="radio" checked>

在这种情况下，元素的checked属性是开发人员可以使用的标志，用于告诉浏览器在页面加载时呈现一个单选按钮或复选框输入的“选中”状态。在页面加载后，当用户稍后选择或取消选择输入时，浏览器不会更新或切换此属性。

来自MDN：

Checked: 如果存在，表示此单选按钮是组中默认选择的单选按钮。

因此，某些人建议使用Element.toggleAttribute('checked')方法的方法将无法按预期工作，因为该.toggleAttribute()方法会添加或删除输入的预渲染标志，但不会像OP试图做的那样更新元素的“checked”状态。将布尔值应用于属性也不会影响元素的状态：（这行不通）checked="false"

在JavaScript中，您可以通过HTMLInputElement的IDL布尔属性.checked访问输入的当前状态，不要与OP引用的同名元素属性混淆。这里HTMLInputElement.checked既是getter又是setter，这意味着您可以按以下方式访问（和切换）.checked的值：

<input type="radio" id="spam-machine" class="blackhat" name="spam-me" value="sure!">

<script>
    const spamMe = document.querySelector('#spam-machine');
    spamMe.checked = !spamMe.checked;
</script>

您还可以使用:checked CSS 伪类有选择地为已选输入样式化：

input[type="radio"].blackhat:checked { visibility: hidden; }

现在走向世界……不以恶报恶。

- orionrush

Answer 7

您可以使用下一个函数按其值切换属性。

// password hidden and visibility 
function toggle(id){
let element = document.getElementById(id);
element.getAttribute("type")==="password" ? element.setAttribute("type","text"):element.setAttribute("type","password");
}```

- khaled elsaeed