Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I toggle an element's attributes using pure JavaScript?

Most of the similar questions that arose as I wrote this one were like this (where the user wishes to toggle an element's class using pure JS) or this (where the user wishes wishes to toggle other attributes using jQuery)

My question is a mixture of the two. I am aware that the el.classList.toggle() method exists for toggling an element's class using pure JS, but I wish to toggle different attributes using pure JS, specifically the checked attribute of some radio buttons, since this (annoyingly) does not change when different options are selected.

Is it possible to toggle the checked attribute on my two radio buttons with pure JS (by toggling I mean remove the attribute from the element altogether if it is present, and add it if it is not)?

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

Edit: The possible duplicate question mentioned in the comments does not quite solve my problem. I don't need to change which radio button appears checked, I just want to toggle the checked attribute, to make it easier for me to reference the button that is checked later on in the code. Of course, if there is another, easier way of doing this, I'm all ears.

like image 203
murchu27 Avatar asked Jul 26 '17 14:07

murchu27


People also ask

How do you toggle data in JavaScript?

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

How do you toggle and off in JavaScript?

You can use classList. toggle function. When the class is visible you can show the tag if not you can hide it.

How do you change attributes in JavaScript?

Another way to change or create an attribute is to use a method like element. setAttribute("attribute", "value") or element. createAttribute("attribute", "value"). Use setAttribute to change an attribute that has been defined before.

What is toggle button in JavaScript?

The JavaScript Toggle Switch Button control is a custom HTML5 input-type checkbox control that allows you to perform a toggle (on/off) action between checked and unchecked states. It supports different sizes, labels, label positions, and UI customization.


2 Answers

There actually is an Element.toggleAttribute method for boolean attributes. MDN Docs.

However, since it is not supported in IE, you might want to add the MDN Polyfill

like image 146
Mendy Avatar answered Sep 29 '22 15:09

Mendy


there is no toggle method for attribute.

You can use:

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

or

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

EDIT: there is now toggle method for attribute.

elm.toggleAttribute('hidden')

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

like image 32
Yukulélé Avatar answered Sep 29 '22 17:09

Yukulélé