How to get multiple checkbox value in javascript and JQuery

In many websites you find multiple check box form to select your interest, or to select multiple options.

That can be created by using HTML check box.

Here to make a input as a text box we need type="checkbox".

name is name given to text box

value property specifies what value a text box holds.

id is used to uniquely identify this text box in HTML Document.

To get this text box value we can use JavaScript.

To get element by Id we can use document.getElementById().

Inside getElementById() we pass the elements id.

in above code we can see that check box id is checkbox1

and to get value we can use value property of getElementById()

how to get checkbox value in javascript with getelementbyid()

var bike = document.getElementById("checkbox1");         
     if(bike.checked){
         ele.push(bike.value);
   }

How to get multiple checkbox value in javascript with getElementById()

Here to select multiple check boxes we selected each check box one by one.

Select Element by id using document.getElementById().

then check checkbox is checked or not.

If checked then push in array.

How to get checkbox value in JQuery

JQuery makes code simple and easy, to select checkbox we can use either name, id or input type checkbox.

We can use any of above ways as per need.

Here we will use checkbox id to select checkbox.

You can download JQuery or include from CDN

We checked check box is selected or not using ($('#checkbox1').is(":checked"))

Here checkbox1 is id of checkbox.

To get the value of check box $('#checkbox1').val();

How to get multiple checkbox value in JQuery

$("input:checkbox[name=cb1]:checked").each(function(){                  
ele.push($(this).val());
});

Here Input check box with name cb1 is checked then for each element get checkbox value and push to array.

get multiple checkbox value using JQuery
Fig: get multiple checkbox value using JQuery

It is very easy to access multiple check box value using JavaScript and JQuery.

You can use these in your web page like in form and to capture user information.

Read More

  1. Add active class onclick
  2. JavaScript Multiplication Table
  3. isPrime() Javascript : Prime number program
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript

Add active class onclick javascript and jQuery

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

  1. Create a div with specific id (here id=”text”)
  2. on click on div call a method makeActive()
  3. Define a function makeActive() in side <script> tag.
  4. Inside makeActive() getElementById
  5. Get Elements classList and add class active.
  6. Use the innerHTML to change to element Text

Add active class onclick javascript to HTML ul List to make menu

Here We have ul list elements to create horizontal menu on click on any element an active class is applied on it and if any one have already active class then remove it.

  1. create a ul menu with li items
  2. make menu display inline using css
  3. inside script tag select all anchor in menu class
  4. on click event find is there any active class in li
  5. if found then remove it
  6. add active class to clicked element.

Reference

Add active class to a div on Jquery onclick event

Here we have taken example of only a single div on click on div it will add an active class on div.

you can download or include Jquery from CDN

To achieve this follow these steps

  1. Define active css class
  2. Include Latest Jquery jquery.min.js file to your html
  3. Create a div with id text.
  4. Write Jquery code inside script tag.
  5. Check for document ready state if ready then
  6. write click function for #text
  7. add a class using jquery addClass()
  8. Change the div content using Jquery text().

Add active class onclick JQuery to HTML ul List to make menu

As we already seen how to add a active class in HTML List.

The same work we will do with JQuery.

JQuery provides easy way to add and remove css class in any element

  1. Create a simple HTML unordered list
  2. Style list to make inline and provide margin
  3. define a active style in css
  4. Include Jquery latest jquery.min.js file
  5. Write Jquery event that will work on document ready
  6. On click on anchor tag inside li first remove all active class from li then add active class in parent li of anchor tag.

Jquery provides addClass() and removeClass() to add and remove any css class.

You can learn how to access parent class id in JQuery

Add Hover effect in HTML menu using JQuery hover()

To add hover effect we used below code.

This will add and remove css class on hover.

Read More

  1. Get multiple checkbox value in javascript
  2. JavaScript Multiplication Table
  3. isPrime() Javascript : Prime number program
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript

Jquery html method

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 html()

setting html content using html()

we can set more then one selector value by html().

using function in html()

Jquery toggle an element

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.

Output

We can also specify the toggle time and function to perform task of toggle done

Output

Hide and show html elements using jquery

Hide and show function are used to show and hide any html element.
Here on button click we are showing and hiding the div.

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 show we can use

Output

jquery get parent id based on class value

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

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 getting class value we can use following which will give second level divs class based on its id value.

Getting id and class value of a html element

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

Output

Changing text on mouse over event

Change text of html element on mouseover and on mouseleave event it should show original message.

Example

Output:

Replacing content of div using .replaceWith()

To replace the content of a div span or any other block elements content with html element a jquery method .replaceWith() is used.
Syntax:

or

A selector can be id class or tag selector of element to replace with newContent passed in .replaceWith() method. a newContent can be html string, DOM element, Array or object.
Another syntax uses any function that evaluates and replace the selector with new function return value.

There is a div with id value a with content Hi how are you. Here id a will replaced with div id with value b and content I am fine when ever user click on button.

Example:
Html page is

We want to replace <div id=”a”> with following content

To achive above with jquery we will use following code

Output:

Here new content will be

Lets use function in replaceWith method

Jquery code


.replaceWith() does not clone the object it replace the content on DOM.

Showing Arraylist values using Struts2 Json and JQuery

I am having comment class, I want to show its property values to jsp page using json

Comments.java

ListJson assigning values for comments.java. Here we fetch value of commentList and totalcomments value in our jsp page.

Struts.xml

In Jsp page