How to detect Element HTML Checkbox checked using JQuery

On the article written, the main purpose for writing the article is mainly on how to detect any checked event on the HTML Checkbox element using JQuery. It can actually be done if it is selected by checking the HTML Checkbox element. For an example, below is a simple declaration of the HTML Checkbox element :

<input type="checkbox" id="chkbox"></input>

Based on the snippet code, it can be concluded that the element itself has its own identifier for further reference and recognition called “chkbox”. Using the identification specified in the id attribute, the subject written in this article is try to focus on how to display an alert or a message contains value of that HTML Checkbox element.

Actually, the above above definition is very useful for further processing primarily detecting the click event as the main trigger. So, the following is the snippet code or the source code which is used to be able to do that :

$(':checkbox').change(function(){
if(this.checked)
   alert(this.value);
});

It is exactly important to be remembered because the script above is using JQuery library in order to be executed, first of all just make sure that the library intended has already been loaded or defined in the page which is going to be executed. Further reference on how to do it can be retrieved from the article titled ‘How to check whether JQuery has been loaded or not’ in this link.

The checking process is done as shown in the above snippet code using the JQuery :checkbox selector. The selector itself is intended as a reference against all of the HTML Checkbox element available or exist in that page. If one of the elements among them is changing in the way they are being checked or unchecked for an example, just execute the function defined. It can be described in the following part of snippet code :

$(':checkbox').change(function(){
});

Therefore, the function execution from the above snippet code shown, it will detect any changes. But what kind of change which is going to be examined ?. It is actually involving the checked process where it will eventually generate or display message using the alert function. Below is part of the script or source code :

if(this.checked) 
   alert(this.value);

So, the process detection has been already done. What kind of change which is going to be detected further, it must declared. Furthermore, the action taken when the event take place must also be defined. In the context of this article, it is generating an alert message.