JQuery

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/>

<script>
$(document).ready(function(){
$("[id*=fstarter_],[id*=fmain_],[id*=fsweet_]").live("click",function(){
get_selected_add_to_menu();
});
});
</script>

How to loop array in jQuery?

example 1:

var crops = ["rice","wheat","turmeric","coconut"];
$.each(crops,function(){
var crop_id = this+"_id";
alert($("#"+crop_id).val());
});

example 2 :

Rice :
Dhal :
Green Dhal :
Total:

code:

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">

<script>
$("#total_cal").click(function() {

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

$("#total_id").html(total);

});
</script>

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

.size function used to get the size.

Example :

Code:


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

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

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

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

</ul>
</div>

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




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

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

Edit
View

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/>

<script>
$(document).ready(function(){

$("#id_type_edit").click(function() {
$("[id*=id_ins_]").each(function(){
$(this).removeAttr("disabled");
});
});
$("#id_type_view").click(function() {
$("[id*=id_ins_]").each(function(){
$(this).attr("disabled",true);

});
});
});
</script>

jQueryhow to add and remove class?

Use addClass to add css class to the element.

$("#check_all").addClass("hidden");

removeClass used to remove css class attached with the element.

$("#check_all").removeClass("hidden");

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