So I have this radio button that I click and it does click. Except when I inspect the DOM I do not see the checked attribute being added, but I can see that the property check has been set to true. I need to be able to preserve this state since I am saving the HTML. Is there away to add/remove the checked attribute as the property changes? Other than adding a handler on click and checking the property to add or remove the attribute.
You will have to manually set that if you want the DOM to change. The DOM does not automatically modifies itself.
To get the current value of the radio button use javascript:
document.getElementById("radio_group_92").checked // true or false
To set the value, use this:
var radiobtn = document.getElementById("the_id_of_the_group");
radiobtn.checked = true;
The radio button documentation only specifies about the checked property:
Definition and Usage
The checked property sets or returns the checked state of a radio
button.
This property reflects the HTML checked attribute.
There are properties and attributes. Attributes are part of the XHTML and properties are not. In general, setting the property does not affect the attribute on the DOM like in your example or the value attribute of a text input. There are some exceptions though, like the id and name properties which will change the attributes of the DOM too.
In your case you will indeed have to manually check for the checked property as #cacho suggested. However, I think that the change event is more suitable than the click.
document.getElementById("radio_group_92").addEventListener("change", function(e){
console.log(e.target.checked);
}, false);
Related
I am developing a website, and I need a certain checkbox that when is unchecked the correspondent input box has the read-only attribute and when I check it the read-only attribute gets removed from the input box. Right now, what happens is I load the website, the checkbox is unchecked and the input box does not has the read-only attribute as it was supposed to. Altough when I check and uncheck it the input box gets the read-only attribute.
Why is this happening?
Here is the Javascript code:
const checkbox = document.getElementById("check_pt");
const inputElement = document.getElementById("pi_pt");
checkbox.addEventListener("change", function() {
if (!(checkbox.checked)) {
inputElement.setAttribute("readonly", "true");
} else {
inputElement.removeAttribute("readonly");
}
});
Your function sets the readonly attribute when the checkbox is changed.
It doesn't get set when the document initially loads, because the user hasn't changed it.
If you want the function to run when the document initially loads, then you'll need to call it at that time. Alternatively, you could set the attribute in the HTML instead of modifying it with JS (which generally makes more sense when setting default values for attributes). Note that if you do either of these, then the state can never change so the change event handler will never run.)
I am using the select Shoelace-element for as agreement checkbox and need to check if it is checked or not. Chrome DevTools shows me the added class "switch--checked" to the label when the switch is checked. It is removed when unchecked.
I need to fire some events when the switch is checked and tried the jQuery hasClass function to do so. I have tried several classes next to the one below. None of it made my event trigger. Please help!
if ( $("label::part(base)").hasClass(".switch--checked") ) {
// do something
}
Select element not-checked
Select element strong textchecked
If you get a reference to the element instance you will be able to read the checked property directly, as well as attach an event listener to get notified when the checked property changes:
const slSwitch= document.querySelector('sl-switch');
// Is it checked?
const checked = slSwitch.checked;
// Listen for changes
slSwitch.addEventListener('slChange', (e) => console.log("<sl-switch> is checked?:", e.target.checked));
You can read more about the properties and events that custom-element supports in their documentation: https://shoelace.style/components/switch
When testing whether a specific element is checked or not in html using jquery
What is the difference between
$(elem).attr('checked') and $(elem).is(':checked') ?
.attr will check the actual checked attribute, although it's worth mentioning that .attr has been replaced with .prop for checking such attributes. .is checks the state of the element.
All in all, you should use this.checked if inside the actual element.
$(elem).attr('checked') gets the value of the checked attribute, whereas $(elem).is(':checked') checks to see whether the element is actually checked or not.
You should try console.log these next time but basically one returns the value and the other one returns true\ false
attr() get/sets the element's attribute. When a user checks or unchecks a checkbox, the checked property is changed, not the attribute. is(':checked') reads the checked property, which could also be done as .prop('checked') or elem.checked.
I want to use prop() to set the attribute of a checkbox to checked.
When I use prop("checked",true) I can visually see that the checkbox is checked, but if I look at the HTML there is no attribute value called checked.
For example:
<input type="checkbox" class="my_class" checked>
is what I would expect to see after using prop("checked", true).
However, I don't see any change in the HTML code. I want to later reference whether or not the attribute checked is set, but since there is not attribute called checked in the HTML, then I'm unable to reference it.
When using prop() you are changing the property and not the attribute, so the changes can't be seen in a DOM inspector, but it is for all intents and purposes changed.
To later see if the element is checked, you'd do:
$('.my_class').is(':checked')
which would return true when checked or false when unchecked, regardless of what you might see in a DOM inspector.
Is there a specific reason you wouldn't use attr() for this application?
If not, that's what you should be using instead of prop()
I'm working on a move up/move down function on one of my lists and the things I need to move contain checkboxes. However, I set the checked attribute in PHP and when I switch the innerHTML of the elements, the checked status always reverts to what the checked attribute is set. I tried making an onchange function to change the attribute as I click it with
if(el.checked == true)
el.setAttribute("checked", "checked");
else
el.setAttribute("checked", "");
but that doesn't work (and i don't know why I even expected it to work, to be honest)
Any idea how I could do it? Switching the elements alltogether in the dom tree would be problematic as would be not setting the checked attribute in PHP.
edit: aparently there's no way to do what I asked but my problem is fixed by not being a lazy bastard and moving things around in the DOM like i'm suppsoed to.
When the checked attribute is present in HTML (no matter what value it has), then the IDL (DOM) attribute checked is initialized to true, as opposite to its default value false. Your code seems to expect otherwise. I don’t understand what you are trying to do, since you should be able to move a checkbox element withouh such operations. If you move the element node, there is no need to play with the attributes.
Set the checked property:
checkboxObject.checked=true|false
You can try this way
if(true) document.getElementById("check1").checked = true;
else document.getElementById("check1").checked = false;
Check on w3School.com
Hope this resolves your issue.