How to bind/link multiple elements to single function in jQuery?

A form have elements.You want to do specific action when user click on those elements.
You can combine those elements using mutliple selector in jQuery like $("element1 element2 element3").

For example you have 3 checkbox groups. When user click on any checkbox group, you link three checkbox to specific event and function like below

Food Starter<br/>
<input id="fstarter_1" name="f_starter[]" value="1">Gobi Manchuerien<br/>
<input id="fstarter_2" name="f_starter[]" value="2">Baby Corn Fry<br/>
<input id="fstarter_3" name="f_starter[]" value="3">Onion Rolls<br/>
<input id="fstarter_4" name="f_starter[]" value="4">Samosa<br/>

Main Course<br/>
<input id="fmain_1" name="f_main[]" value="1">Palk Paneer<br/>
<input id="fmain_2" name="f_main[]" value="2">Navarathna Kuruma<br/>
<input id="fmain_3" name="f_main[]" value="3">Paneer Butter Masala<br/>
<input id="fmain_4" name="f_main[]" value="4">Nan<br/>
<input id="fmain_5" name="f_main[]" value="5">Butter Nan<br/>

Sweets <input id="fsweet_1" name="f_sweet[]" value="1">Jelabi<br/>
<input id="fsweet_2" name="f_sweet[]" value="2">Halwa<br/>


How to loop array in jQuery?

example 1:

var crops = ["rice","wheat","turmeric","coconut"];
var crop_id = this+"_id";

example 2 :

Rice :
Dhal :
Green Dhal :


Rice : <input type="text" name="grocery" id="rice_id" value="40">
Dhal : <input type="text" name="grocery" id="dhal_id" value="100">
Green Dhal : <input type="text" name="grocery" id="greendhal_id" value="90">

$("#total_cal").click(function() {

total = 0;
$("input[name='grocery[]']").each(function() {
total = parseFloat(total)+ parseFloat($(this).val());



JQuery: How to get the number of elements in the list?

.size function used to get the size.

Example :


<div id="id_grpList" style="display:none">
<li id="1">Friends</li>

<li id="2">Family</li>

<li id="3">Colleagues</li>

<li id="4">Relatives</li>


<div id="id_jobSite" style="display:none">
US Job Sites:
<li>monster <li>indeed <li>dice </ul>
<ul id="id_newsPaper">

//if the group have list of elements then display that grpList div
if($("#id_grpList li").size()>0) {
//if news paper have list then show the jobSite div
if($("#id_newsPaper li").size()>0) {

JQuery : How to enable / disable the text boxes based on radio button selection?


Insurance Name :

Insurance Cost :

Insurance Coverage :

Code Snippet:
<input type="radio" id="id_type_edit" name="type" value="Edit" />Edit
<input type="radio" id="id_type_view" name="type" value="View" />View

Insurance Name : <input type="text" id="id_ins_name" name="ins_name" value="AIG" disabled="disabled" /><br/>
Insurance Cost : <input type="text" id="id_ins_cost" name="ins_cost" value="1000" disabled="disabled" /><br/>
Insurance Coverage : <input type="text" id="id_ins_coverage" name="ins_coverage" value="60%" disabled="disabled" /><br/>


$("#id_type_edit").click(function() {
$("#id_type_view").click(function() {


jQueryhow to add and remove class?

Use addClass to add css class to the element.


removeClass used to remove css class attached with the element.


JQuery - How to remove the , in the number format?

$rupees = $rupees.replace(/,/g,'');
g is used to remove all the occurance of , in the number format.

Syndicate content