0

This question is a little weird but is playing with my head. I was looking how to verify if an input of type radio was checked/selected using JQuery.

I solved my problem using a code that looks like this:

if ($("#someId").is(":checked")) {
}

It is really simple but when I verify/inspect the input fields with the browser developer tools, none of the inputs has any attribute different, they all look the same. So:

How does the validation works? What does that function to know which of the inputs is really checked?

I will leave this Fiddle shared by @Peter J in another question so that you can see what I'm talking about and maybe help me: http://jsfiddle.net/RhnvU/

Thanks :)

Felipe Correa
  • 654
  • 9
  • 23

3 Answers3

4

This is not stored as an html attribute, but in the DOM object associated with the radio button. You can see this in devtools, in the source tab, in the watch expression pane.

enter image description here

And you can get this information in javascript:

var checkedElement= document.querySelector("input:checked");
console.log(checkedElement.checked);

http://jsfiddle.net/RhnvU/3831/

Gaël Barbin
  • 3,769
  • 3
  • 25
  • 52
  • 1
    You can also get and set the checked status of a particular element by using the jQuery [`prop`](https://api.jquery.com/prop/) method like so: `$('#radio').prop('checked')`. – ilikesleeping Apr 15 '15 at 23:02
  • Learning every day. Great answer, I was hitting my head to the wall. So used to see that things like these attributes are always reflected in the HTML. It gets even more confusing when the attribute "checked" is shown in one item in the HTML and another one is the one that is really checked in the DOM. – Felipe Correa Apr 15 '15 at 23:04
  • 2
    There's a difference between the checked _attribute_ and the checked _property_. The _attribute_ is what appears in the source and is only used to indicate the **default** state of the input, and doesn't change when the element is checked and unchecked. The _property_ is a part of the DOM node, and represents what the element currently is, and that is what changes. And so it might be different from what the attribute says. There's a good answer on it [here](http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html) – ilikesleeping Apr 15 '15 at 23:10
1

I've updated this example: http://jsfiddle.net/AlexeiTruhin/RhnvU/3829/

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
   console.log(document.getElementsByTagName("input")); // pure JS
});

When checking Console from Inspect Elements (in my case), we get an array of this 3 inputs. And each input has attributes. One of the attributes is 'checked', with the possible values 'true' or 'false'. This job is done by browser, so jQuery just checks this value.

alexeiTruhin
  • 425
  • 3
  • 9
  • So this means the attribute is updated in the DOM Object and not updated in the HTML? If you can confirm this, I will take this as an answer as your example is clear =D – Felipe Correa Apr 15 '15 at 22:56
0

If I'm not mistaken, and I'm understanding your question correctly....

When a checkbox is selected it adds the attribute checked

You can also find this by $("#someId:checked")

and in css #someId:checked

Seth McClaine
  • 9,142
  • 6
  • 38
  • 64
  • But the attribute doesn't show in the html if you look through the developer tools of chrome (hasn't checked if it works with another). That's what bothers me: If the HTML doesn't change, how does everything in the code (css/javascript) know which of the inputs is checked? – Felipe Correa Apr 15 '15 at 22:52