- [Voiceover] In this video we're going to look at a couple of the other field types. Radio buttons, and checkboxes. These have some special ways of accessing them with some new properties of interest. So I'm going to open up my console, and I'll inspect the checkboxes first. So first I'm going to look for an ID on these checkboxes. Here's one on the special gift checkbox. Very good. So I'm going to double click this and copy it's ID, then switch over to the console.
First let's try what we've been using so far. Document.getElementById. Pass in the ID. And then check the value. Here I get back YES. Alright, we can clearly see that this checkbox is not checked. So what's going on here? What's going on is the value attribute on this checkbox is yes, so I'm actually getting back the correct answer, I'm just maybe not asking the right question. So the right question to ask is, is this box checked? If it is, then maybe I'll take some particular action.
The way to find out whether a checkbox is checked is to use a different property. So I'm gonna type in up arrow, the property that I want is, of all things, checked. And this is a boolean. It's either going to be true or false. Currently this box is not checked, so it's false. Now when I check the box, come back to my console, hit up arrow, to get this again, execute it again, now it's true. This is what I really want to know when I'm dealing with checkboxes.
Is the box actually checked? And I can use this same checked property on radio buttons as well, but I'm going to use it in a different way. And I'm going to inspect this pickup radio button first. With radio buttons it's a little different, because I have a group of them, and only one value can be selected. So getting the value of the currently selected radio button actually is meaningful in a way that retrieving a value is not so meaningful for a checkbox.
Each of these shares a method name. There are some other properties they share as well, they are all the radio type, but what I want is the value of the selected radio button. Now, in the document object model, the property that I'm checking is not called selected. Just as with checkboxes, it's called checked. As you can see here, by default, the pickup method is checked. But it can be a little bit tedious to check each radio button individually, and ask, is this checked? Is this checked? Is this checked? It'd be nice if there were a better way to do this all at once, just by asking the entire group, which one of you is checked, and give me back the value.
We have a different function that can help us with that. It's also on the global document property, and it's called querySelector. This is a relatively new property, supported well in all modern browsers. And it lets me use CSS syntax to select elements on the page, the same way that document.getElementById lets me select items by their ID, with querySelector, I can use CSS to make a selection using anything that's supported by CSS.
In this case, I wanna select the input whose name attribute is the one used by these radio buttons, which is r_method. So I'm going to double click that, copy it, come back to my console, and an attribute in selector in CSS uses square brackets like this. So I'll say name=r_method. And then I'm going to use a filter, or a pseudo selector in CSS, called checked. So this CSS says, give me the input whose name attribute is r_method, and which is checked.
And there we go. I get back the pickup radio button. Let me change the selection. Now UPS is checked. Try the same thing, and I get back UPS. And so now, if I tack on the value property here, I get back the actual value that I want. This is much, much easier than it used to be, dealing with radio buttons before we had querySelector. There's an equivalent method to querySelector called querySelectorAll, which will retrieve all the elements that match a particular CSS selector.
Document.querySelector, and Document.querySelectorAll are extremely useful, quite fast, and as long as you're targeting a relatively modern browser, you'll be able to use them all over your pages.
- Working with the DOM
- Creating maps with the Google Maps API