Extend Function

6 minutes
Share the link to this page
Copied
  Completed
Merge the contents of two or more objects together into the first object.

Transcript

Hello in this jQuery video I'm going to show you the function extend. So this essentially allows you to extend, you know, the built in jQuery selectors to you know, for example, if we have if we have, let's say we have a couple of inputs. So actually, we can simulate this type box with the name we don't even need any we can even get away without having the name Don't bother. I was going to put a bit a piece of text here. Now I was gonna say me say if we were to click that is clicking the checkbox we can turn it on, but what we can do is making it so we can extend the functionality of you know this check in on checking aspect. So we can not only do extra stuff when it's been checked on or off programmatically, but also trigger it programmatically based upon selector.

So first of all, let you know just programmatically extend it to do dollar.fm. Bear in mind, you might see some tools doing jQuery. dialect is just a shorthand for the jQuery keyword saying it's part of degree. So you could actually replace this with jQuery as well the key word jQuery, I prefer this method dot extend. Now Hello, and now here was a check. So when, so if we call the check function, this is going to turn it on is a function who's going to run this function in the function it's going to return this each function callback.

Make sure all the brackets are 40. There's quite a few brackets here. So very important and he ended dot check. Okay, so we want to do something similar for the uncheck, comma, copy and paste this for the most part. The only differences are you guys from check to uncheck in change from diff dot check equals to to destruction equals false true is it, you know been clicked on like so this is the equivalent of false now, okay? all cool stuff at the moment you won't do anything, we aren't triggering any of these methods.

So what I want to do, what I want to do is create A couple of buttons. So I'm going to break line and say input type equals button. And I am going to say that this is going to have an ID of check and then gonna have a value of two and this value will be okay, so let's see what we get when we want that. value should be no, forget that I forgot what it is. I was going to directly go to buttons there. That's what we want and check Id check but copy and paste.

And if you don't know keep this on check. We run it we have two buttons at the moment, they don't do anything. But if all is selected versus $1 do hash I mean when it's been clicked to click, call this function. And in here, I am simply going to select the input box you can select the however you want. I'm just going to say dialer. Input only selected based on the types of your multiple checkboxes.

This would trigger all of them single quotation marks and so on. So complex checkbox. Check. So this is an a built in method into jQuery. Not in the way that it is here, but we've extended the functionality. So this is saying extend the dollar dot function from Schanzer, anything that we select, we can have this check or see make sense for checkboxes.

And if all simply do some for uncheck, and when I'm checking in, if I reload it, okay, I'll leave even being triggered on that. Console dot log. Nothing Sure. For that log on check. Okay, so then I have been triggered. So starter, mentally check in check.

Simple mistake, click it, there we go it on checks, and it checks perfectly clicking this one, as you can see keep printing out on check, but because it's already off, it doesn't trigger it. So that is how we programmatically extend the functionality. And all you need is this part. And this part to check it and uncheck it. But you could add acts and stuff. I've done a console log, you could be saving them to the database, tracking some statistics, whatever you want.

So that's it. It's a little bit quite a bit of code to get your head around. So if you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.