how to use the "this " in javascript?what is the purpose of this

Question

I go through the many websites but am a slow learner i couldn't get the correct meaning for this please clarify my doubt..

<input type='checkbox'  name="checkbox[]" onclick="whole_delete(this)" id="checkbox[$id]" value="<?php echo $store['id'];?>"/>

function whole_delete(source) {  
  checkboxes = document.getElementsByName("checkbox[]");  
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

onclick="whole_delete(this) here this can change as a source in whole_delete

i am confusing.and i dont know the value of source and what is the meaning of source.checked; pl identify my question and clarify my doubt.ya i know my question is silly but pl clarify.

If you want to distinguish between *this* in English and `this` in JavaScript, use code (`\`this\``) markup. — Quentin, Dec 03 '13 at 12:06

score 1 · Answer 1 · answered Dec 03 '13 at 12:09

Let's take this list as an example:

<label>Album 1. Delete all? <input type="checkbox" onclick="whole_delete(this)"></label>
<ul>
    <li>Photo 1. Delete? <input type="checkbox"></li>
    <li>Photo 2. Delete? <input type="checkbox"></li>
    <li>Photo 3. Delete? <input type="checkbox"></li>
    <li>Photo 4. Delete? <input type="checkbox"></li>
</ul>

So, what does this mean? You are presenting the user an Album, that has a list of photos. The user can check the input next to each photo name to mark it for deletion. Since you don't want to force the user the check each photo manually when deleting all photos in an album , you decide to add a master checkbox (the one next to Album). When a user clicks that checkbox, your javascript should mark the "Delete" checkbox for all photos (or unmark).

So how do you do that? This:

onclick="whole_delete(this)

In this case this is a reference to the checkbox you just clicked. You are passing an HTMLElement as a parameter to the javascript function whole_delete. The .checked is a property that indicates if the checkbox is checked or not.

So, when the function is called, it will look for all checkboxes in the page and make it the same as the Album checkbox you just clicked. If it is checked, all photos will be checked. If it is unchecked, all photos will be unchecked.

score 0 · Answer 2 · answered Dec 03 '13 at 12:08

this references the current context that the code is being executed in. In your checkbox example, this refer to the checkbox, so when you pass this to the whole_delete function the specific checkbox it came from is passed in and named source. The following code then checks whether that particular checkbox is checked or not.

If you had a page with 20 checkboxes on, they could all use onclick="whole_delete(this)" and this would always pass the reference to the specific checkbox that the event came from.

score 0 · Answer 3 · answered Dec 03 '13 at 12:11

The this construct is a reference to the current object context. What it actually points to changes as the context of the program changes throughout its execution.

In your case it is a reference to the JavaScript object representing the specific check box that was clicked. Of course if you click a different checkbox later, it will then change to point to that object since the context changed.

source is then a DOMElement representing a checkbox & has a property checked which will have a value of true or false depending on whether the checkbox is checked nor not.

For more on DOMElememts see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

how to use the "this " in javascript?what is the purpose of this

3 Answers3