Here we will see the Javascript jquery checkbox checked and unchecked and ischecked examples. Input type checkbox How to create input checkbox in HTML.. for this, we have to use the input type checkbox. along with type we used other attributes line name value and id.
1 | <input type="checkbox" name="hobby" value="music" id="ck1"> Music |
Jquery checkbox checked To select check boxes $(“#ck1”).prop(“checked”,true); … Read more
Jquery remove element is a way to remove an element from DOM. Jquery remove element on button click The remove() is very useful to remove the elements
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery Remove()</h2> <p>Remove this line</p> <button>Remove Paragraph</button> <script> $( "button" ).click(function() { $( "p" ).remove(); }); </script> </body> </html> |
Jquery remove element by class Example remove html element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery remove() by class</h2> <p class="one">This is class one</p> <p class="two">This is class two (Remove this)</p> <p class="three">This is class three</p> <p class="two">This is class two (Remove this)</p> <button>Remove Paragraph</button> <script> $( "button" ).click(function() { $( ".two" ).remove(); }); </script> </body> </html> |
Jquery remove element by id
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <style> .box{ padding:20px; border: solid red 2px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery remove() by id</h2> <p id="one" class="box">This is id one <button>Remove this</button></p> <p id="two" class="box">This is id two</p> <p id="tree" class="box">This is id three</p> <script> $( "button" ).click(function() { $( "#one" ).remove(); }); </script> </body> </html> |
Remove element from DOM
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <style> .info{ background-color: #f1f1f1; border: 1px solid; } .box{ margin:15px; padding:15px; background-color: #fff; border: 1px solid green; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery add and remove class</h2> <div class="info"> <p class="first box">This is first div</p> <p class="second box">This is second div</p> <p class="third box">This is third div</p> <p class="fourth box">This is fourth div</p> <p class="fifth box">This is fifth div</p> <p class="sixth box">This is sixth div</p> </div> <br/> <script> $( ".box" ).click(function() { $(this).remove(); }); </script> </body> </html> |
remove text from div
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <style> .info{ background-color: #f1f1f1; border: 1px solid; } .box{ margin:15px; padding:15px; background-color: #fff; border: 1px solid green; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery remove text</h2> <div class="info"> <p class="first box">This is first div</p> </div><br/> <button id="btn">Remove text</button> <br/> <script> $( "#btn" ).click(function() { $(".first").empty(); }); </script> </body> </html> |
Jquery … Read more
On many websites, you find multiple check box forms to select your interest, or to select multiple options. That can be created by using the HTML check box.
1 | <input type="checkbox" name="Hobby" value="Painting" id="cb1"> |
Here to make an input as a text box we need type=”checkbox”. name is a name given to a text box value property that specifies what … Read more
Add active class to a div on javascript onclick event Here we are applying a style to a simple div. Steps to add a css class on click event Create a div with specific id (here id=”text”) on click on div call a method makeActive() Define a function makeActive() in side <script> tag. Inside makeActive() … Read more
html() is used to get or set the html content in matched selector. Getting content using html() Html() get contents with html tags of specified selector If more then one elements are there with same selector then only first matched elements content are get using html(). for setting html content we pass string argument in … Read more
toggle is a method which is used to show and hide the selected class. if select element is hidden then on toggle it will show element. If element is not hidden on toggle it will hide the element.
1 2 3 4 5 | <div class="description"> <h1>Photography</h1> <p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.</p> </div> <input type="submit" value="Toggle" id="toggle" /> |
1 2 3 4 5 | $(document).ready(function () { $(document).on('click', '#toggle', function (event) { $(".description").toggle(); }); }); |
Output We can also specify the toggle time and function to perform task of toggle … Read more
Hide and show function are used to show and hide any html element. Here on button click we are showing and hiding the div.
1 2 3 4 5 | <div class="description"> jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. </div> <input type="submit" value="Hide" id="hide" /> <input type="submit" value="Show" id="show" /> |
1 2 3 4 5 6 7 8 | $(document).ready(function () { $(document).on('click', '#hide', function (event) { $(".description").hide(); }); $(document).on('click', '#show', function (event) { $(".description").show(); }); }); |
Output We can also provide how long this hide or show will take place be specifying the time like $(“.description”).hide(2000); or $(“.description”).show(2000); to perform specific task after hide or … Read more
If we have nested divs one inside another and we want to get id of parent div for this we use parents(). suppose following div structure
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="level1" id="level1_123"> <div class="level2" id="level2_324"> <div class="level3" id="level3_567"> <div class="level4" id="level4_985"> <input type="submit" value="Get Parent Id" id="submit"> </div> </div> </div> </div> |
1 2 3 4 5 6 7 | $(document).ready(function () { $(document).on('click', '#submit', function (event) { event.preventDefault(); var parentId = $(this).parents(".level1").attr("id"); alert(parentId); }); }); |
as above we have seen how to get id for top parent and similar we can get id or class value for any level of parent. for … Read more
We have a div and we want to get its id value based on its class value. Suppose a div is given as below and we want to fetch div id based on a button click. for getting attribute id we use attr() method. Example
1 2 3 4 | <div class="select" id="select_25"> This is a ball </div> <input type="submit" value="Get Id" id="submit"> |
1 2 3 4 5 6 7 | $(document).ready(function () { $(document).on('click', '#submit', function (event) { event.preventDefault(); alert("id is "+$(".select").attr('id')); alert("class is "+$("#select_25").attr('class')); }); }); |
Output
Change text of html element on mouseover and on mouseleave event it should show original message. Example
1 2 3 | <div id="message"> Hi How are you </div> |
1 2 3 4 5 6 7 8 9 | $(document).ready(function() { $(document).on('mouseover', '#message', function(event) { event.preventDefault(); $("#message").text("I am fine"); }).on('mouseleave', '#message', function(event) { event.preventDefault(); $("#message").text("Hi How are you"); }); }); |
Output: