Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:10Length:50 minutes
Jui form 3
  • Overview
  • Transcript

2.5 jQuery UI Checkboxradio Widget

The Checkboxradio widget in jQuery UI provides quick, convenient styling for HTML radio buttons and checkboxes. In this lesson, you’ll learn how to create and initialize them.

Related Links

2.5 jQuery UI Checkboxradio Widget

Hello and welcome back. In this lesson, we're going to talk about the jQuery UI checkbox radio widget. As you might deduce from the name, the checkbox radio widget gives you a nice clean styles for checkboxes and radio buttons. In this particular lesson, we're just gonna look at radio buttons, but it works the same way for both. And as always, you can go to the jQuery UI website to see all the options that are available. So because this has a lot of HTML code involved, I'm just going to paste the code and we'll look over it. So after our last widget here, here's the closing div for that last widget. And first of all, you can find the URL for this starting pen in your course notes for this lesson. Let's go ahead and fork it to create a new copy. And then we'll jump into the HTML. So after our last widget here, here's the closing div for that, the when can you start widget. We'll go to the next line and I'm just gonna hit CTRL + V to paste. So what we're looking at here involves this entire UI widget. You'll notice there's a field set inside that widget with a legend how did you hear about us. That's how we have this style set up here. And we obviously need to apply some more styles because it doesn't look very good just yet. But this is the basic HTML code, we have a label for rdoInternet and this is one of the methods they might have heard about us from the Internets. And then we have the actual input field, the radio button assigned to that. And we have a label and an input for television ads and a label and an input for other. And just keep in mind that each of these has the same name applied to them of rdoReferrer, so that they will be grouped together. So for our CSS, what I really wanna do is nudge this down a little bit. So that it's not right up against that text box below it. So in our CSS, we're going to add a new rule for the fieldset element. And we're just gonna set its margin-top to the same as the margin-top for our labels which is 20 pixels. And that'll nudge it down a little bit. Now the rest of the styling is actually gonna be taken care of by the jQuery UI checkbox radio widget. So let's jump into our JavaScript and apply that widget or instantiate that widget. So we'll skip a couple of lines after our date picker and we're gonna point to a different kind of rule. We're gonna point to inputs, any kind of input that has a type of radio. So any input that has a type of radio, we're going to assign the checkbox radio widget to it. And just like that you can see it creates this nice little stylized set up for us. They change the colors whenever we click on them. It's a lot nicer than your old fashioned radio buttons. And again, that's really all we have for this particular lesson. As always, you can get more information about that particular widget on the jQuery UI website. So thank you for watching and I'll see you in the next lesson.

Back to the top