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.
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.
You can use classList. toggle function. When the class is visible you can show the tag if not you can hide it.
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.
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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With