jQuery :checkbox Selector
The jQuery :checkbox Selector is a very important element to make interactions with a user. In JQuery, we can build a simple checkbox to allow data entry as well.
Syntax:
$(":checkbox")
We can implement the checkbox in the code:
Example 1: In this example, we will select the input element which has a checkbox field button by using jQuery :checkbox Selector.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < style > p { font-size: 20px } </ style > < script > $(document).ready(function () { $(":checkbox").wrap( "< span style = 'background-color:green' >"); }); </ script > </ head > < body > < h2 >Add your Hobbies:</ h2 > < p >Dancing: < input type = "checkbox" name = "hobbies" value = "dancing" > < br > Painting: < input type = "checkbox" name = "hobbies" value = "painting" > < br > Singing: < input type = "checkbox" name = "hobbies" value = "singing" > < br > </ p > </ body > </ html > |
Output:
Example 2: In this example, we will change the background color of the input element which has a checkbox field button with click function.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < style > p { font-size: 20px } </ style > < script > $(document).ready(function () { $("button").click(function () { $(":checkbox").wrap( "< span style = 'background-color:red' >"); }); }); </ script > </ head > < body > < h2 >Languages:</ h2 > < p >Python: < input type = "checkbox" name = "hobbies" value = "dancing" > < br > C++: < input type = "checkbox" name = "hobbies" value = "painting" > < br > Java: < input type = "checkbox" name = "hobbies" value = "singing" > < br >< br > < button >Change color</ button > </ p > </ body > </ html > |
Output:
Contact Us