Javascript : function bind.click & for each checkbox - javascript

I have some combo box, every combo box have value and group by class & ID
<input type="checkbox" value="A" class="box-1" id="ID_1">
<input type="checkbox" value="B" class="box-1" id="ID_1">
<input type="checkbox" value="C" class="box-2" id="ID_2">
<input type="checkbox" value="D" class="box-2" id="ID_2">
If user click button, then check each box, if this checked, store value & ID to variable.
EDIT :
JS :
$('#button').bind('click', function() {
var box = '';
var p =0;
var count = document.getElementById("count").value; // for count total class checkbox
for(d=1; d <= count; d++){
p = 0;
$('.box-' + d).each(function(item){ // each box-1/2/3
if(this.checked){
if(p == 0)
{
var name = this.value.replace(/\s/g, '');
box += '&' + ($(this).attr('id')) + '=' + '&' + encodeURIComponent(name).toLowerCase());
p+=1;
alert(box);
}
else
{
var href = ($(this).attr('id')) + '=';
var name_2 = this.value.replace(/\s/g, '');
box += href + '&' + encodeURIComponent(name_2).toLowerCase());
p+=1;
}
}
});
}
alert(box);
//location = url;
});
example case :
the checked combo box is A & D
what i expect is &ID_1=&AID_2=&D ( this is different ID), if same ID = &ID_1=&A&D
when i try alert it's display nothing(''), but when i try alert(box) inside if( p== 0) it's have result 1&ID_1=A and 0&ID_2=&D.
Try check this here

change your code into like this
$('#button').bind('click', function() {
var boxval="";
//&ID_1=&AID_2=&D
$("input[class^='box-']").each(function(){
if($(this).is(':checked'))
{
boxval += $(this).attr('id') +'=&' + $(this).attr('value');
}
});
if(boxval !='')
alert(boxval)
else
alert("nothing will selected");
});
below is the working fiddle
https://jsfiddle.net/17hxsa9r/

You have declared box twice in your code
var box = '';
and
$('.box-' + d).each(function(box){ // each box-1/2/3
The box declared inside each() hides the outer box, therefore its value is not changed.
You need to name one of them differently.

Related

how to get dynamic id of dynamically created textbox in jquery

i want to perform keyup event via textbox id, and all textbox are dynamically created with onclick button event. for this i have to make 20 keyup function. if i use 20 keyup function then my code will become too lengthy and complex. instead of this i want to use a common function for all textbox. can anybody suggest me how to do it..thanks
here is what i am doing to solve it:
<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button></div>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var counter = 2;
$(".add_field_button").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="firsttextbox' + counter + '" value="" > <input type="text" name="textbox' + counter +
'" id="secondtextbox' + counter + '" value="" > Remove<input type="text" id="box' + counter + '" value="">sum</div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
function check(a, b) {
var first = a;
var second = b;
var temp = temp;
var novalue = "";
result = parseInt(first) + parseInt(second);
if (!isNaN(result)) {
return result;
} else {
return novalue;
}
}
$(this).on("keyup", "#firsttextbox2", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox2').value;
var b = document.getElementById('secondtextbox2').value;
var number = 2;
result = check(a, b);
document.getElementById('box2').value = result;
});
$(this).on("keyup", "#firsttextbox3", function(e) {
var number = 3;
e.preventDefault();
var a = document.getElementById('firsttextbox3').value;
var b = document.getElementById('secondtextbox3').value;
result = check(a, b);
document.getElementById('box3').value = result;
});
$(this).on("keyup", "#firsttextbox4", function(e) {
var number = 4;
e.preventDefault();
var a = document.getElementById('firsttextbox4').value;
var b = document.getElementById('secondtextbox4').value;
result = check(a, b);
final = document.getElementById('box4').value = result;
});
$(this).on("keyup", "#secondtextbox2", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox2').value;
var b = document.getElementById('secondtextbox2').value;
result = check(a, b);
document.getElementById('box2').value = result;
});
$(this).on("keyup", "#secondtextbox3", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox3').value;
var b = document.getElementById('secondtextbox3').value;
result = check(a, b);
document.getElementById('box3').value = result;
});
$(this).on("keyup", "#secondtextbox4", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox4').value;
var b = document.getElementById('secondtextbox4').value;
result = check(a, b);
document.getElementById('box4').value = result;
});
$(this).on("click", "#remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('#target').remove();
counter--;
});
});
</script>
See the snippet below to see how you can make this implementation more modular and useable. The trick is to think: what do I want to do? I want to be able to add multiple inputs and add their value, printing the result in another input.
It comes down to using classes - since we are going to use the same kind of thing for every row. Then apply something that works for all classes. No IDs whatsoever! You can even use the name property of the input that contains the value you want to save. Using the [] in that property will even pass you back a nice array when POSTING!
I know this looks like a daunting lot, but remove my comments and the number of lines reduces dramatically and this kind of code is almost infinitely extendable and reusable.
But have a look, this works and its simple and - most of all - it's DRY (don't repeat yourself 0 once you do, re-evaluate as there should be a better way!)!
Update
You could also use a <ol>as a wrapper and then add an <li> to this every time, so you get automatic counting of boxes in the front end without any effort from your end! Actually, thats so nice for this that I have changed my implementation.
var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;
add.click(function(event){
// create a limit
if($(".box").length >= maximumBoxes){
alert("You cannot have more than 10 boxes!");
return;
}
var listItem = $('<li class="box"></li>');
// we will add 2 boxes here, but we can modify this in the amountOfBoxes value
for(var i = 0; i < amountOfInputs; i++){
listItem.append('<input type="text" class="input" />');
}
listItem.append('<input type="text" class="output" name="value" />');
// Lets add a link to remove this group as well, with a removeGroup class
listItem.append('<input type="button" value="Remove" class="removeGroup" />')
listItem.appendTo(all);
});
// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("keyup", "input.input", function(event){
// Get the group
var group = $(this).parent();
// Get the children (all that arent the .output input)
var children = group.children("input:not(.output)");
// Get the input where you want to print the output
var output = group.children(".output");
// Set a value
var value = 0;
// Here we will run through every input and add its value
children.each(function(){
// Add the value of every box. If parseInt fails, add 0.
value += parseInt(this.value) || 0;
});
// Print the output value
output.val(value);
});
// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event){
event.preventDefault();
$(this).parent(".box").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />
You can target all your textboxes, present or future, whatever their number, with a simple function like this :
$(document).on("keyup", "input[type=text]", function(){
var $textbox = $(this);
console.log($textbox.val());
})
$("button").click(function(){
$("#container").append('<input type="text" /><br>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
</div>
<button>Create one more</button>
You don't need complicated generated IDs, not necessarily a class (except if you have other input[type=text] you don't want to conflict with). And you don't need to duplicate your code and write 20 times the same function. Ever. If you're duplicating code, you're doing wrong.
Add classes "a" and "b" to the textboxes and "box" to the box. Then add data-idx attribute with the index (unused!?). Finally register the event handlers:
$('.a').on('keyup', function(e){
e.preventDefault();
var $this = $(this)
var $p = $this.parent()
var a= this.value;
var b= $p.find('.b').val()
var number =$this.data('idx') //unused!?
var result = check(a,b)
$p.find('.box').val(result)
})
$('.b').on('keyup', function(e){
e.preventDefault();
var $this = $(this)
var $p = $this.parent()
var a= $p.find('.a').val()
var b= this.value
var result = check(a,b)
$p.find('.box').val(result)
})
Or a general one:
$('.a,.b').on('keyup', function(e){
e.preventDefault();
var $p = $(this).parent()
var a= $p.find('.a').val()
var b= $p.find('.b').val()
var result = check(a,b)
$p.find('.box').val(result)
})
You can assign a class to all textboxes on which you want to perform keyup event and than using this class you can attach the event on elements which have that class. Here is an example
var html="";
for (var i = 0; i < 20; i++)
{
html += "<input type='text' id='txt" + i + "' class='someClass' />";
}
$("#testDiv").html(html);
Attach keyup event on elements which have class someClass.
$(".someClass").keyup(function () {
alert($(this).attr("id"));
});
A little helper to combine with your favorite answer:
var uid = function () {
var id = 0;
return function () {
return ++id;
};
}();
Usage:
uid(); // 1
uid(); // 2
uid(); // 3
Providing a code-snippet which may give you some hint:
$(".add_field_button").click(function ()
{
if (counter > 10)
{
alert("Only 10 textboxes allow");
return false;
}
var txtBoxDiv = $("<div id='TextBoxDiv"+counter+"' style='float:left;width:10%; position:relative; margin-left:5px;' align='center'></div>");
//creating the risk weight
var txtBox1 = $('<input />',
{
'id' : 'fst_textbox_' + counter,
'name' : 'textbox'+counter,
'type' : 'text',
'class' : 'input_field',
'onClick' : 'txtBoxFun(this,'+counter+')'
});
var txtBox2 = $('<input />',
{
'id' : 'sec_textbox_' + counter,
'name' : 'textbox'+counter,
'type' : 'text',
'class' : 'input_field',
'onClick' : 'txtBoxFun(this,'+counter+')'
});
var txtBox3 = $('<input />',
{
'id' : 'sum_textbox_' + counter,
'name' : 'textbox'+counter,
'type' : 'text',
'class' : 'input_field',
});
$(txtBoxDiv).append(txtBox1).append(txtBox2);
$(txtBoxDiv).append(txtBox3);
});
function txtBoxFun(obj, count)
{
var idGet = $(obj).attr('id');
var idArr = new Array();
idArr = idGet.split("_");
if(idArr[0] == "fst")
{
var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#sec_textbox_"+count).val()));
}
else if(idArr[0] == "sec")
{
var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#fst_textbox_"+count).val()));
}
$("#sum_textbox_"+count).val(sumTxt);
}

jQuery - list input classess and get number of selected checkboxes

I'm looking for jQuery code which will list all classess from inputs and display how many times every class (in this case class=value) is selected.
html schema:
<input type="checkbox" name="t1" class="a1" value="a1">
<input type="checkbox" name="t1" class="a2" value="a2">
<input type="checkbox" name="t1" class="a3" value="a3">
<input type="checkbox" name="t2" class="a1" value="a1">
<input type="checkbox" name="t2" class="a2" value="a2">
<input type="checkbox" name="t2" class="a3" value="a3">
...
<input type="checkbox" name="t9" class="a99" value="a99">
example of expected result:
a1 - 2
a2 - 0
a3 - 0
a99 - 0
Try
var map = {};
$('input[type=checkbox]').each(function () {
if (this.checked) {
map[this.className] = (map[this.className] || 0) + 1;
} else {
map[this.className] = map[this.className] || 0;
}
});
console.log(map)
Demo: Fiddle
You could try something like this:
var checked = new Array();
$("input[type=checkbox]").each( function() {
var cl = $(this).attr('class');
if (typeof(checked[cl]) == "undefined") checked[cl] = 0;
if ($(this).is(':checked')) checked[cl]++;
});
After this, you will have variable checked containing all checkbox classes, with number of checked boxes for each class.
Let me know if this works for you.
Fiddle: http://jsfiddle.net/smBSw/1/
var resultList = {}
$('input:checkbox').each(function () {
var result = resultList[this.className] || 0;
if (this.checked) {
result++;
}
resultList[this.className] = result;
});
console.log(resultList)
console.log(JSON.stringify(resultList));
You can use like :
var className = [];
$("#btn").click(function () {
$("#result").html("");
$("input[class^=a]").each(function () {
className.push($(this).attr("class"));
});
className = jQuery.unique(className);
for (i = 0; i < className.length; i++) {
var count = 0;
$("." + className[i]).each(function () {
if (this.checked) {
count++;
}
});
$("#result").append(
"<br/><span> " +
"className: " + className[i] + ", " +
"count :" + count +
"</span>"
);
}
});
demo fiddle
Basically you will need to iterate through these inputs.. but you will need a place to save the counts
$(".checkboxes").on("change", "input", function() {
var results = {"a1": 0, "a2": 0, "a3": 0};
$(".checkboxes input").each(function(i, checkbox) {
if (!$(checkbox).prop("checked")) {
return;
}
results[$(checkbox).val()] = results[$(checkbox).val()] + 1;
});
var resultsToAppend = '';
$.each(results, function(key, value) {
resultsToAppend += '<li>' + key + ' : ' + value + '</li>';
});
$(".results").html(resultsToAppend);
});
Here's a fiddle

Showing hidden textboxes as they are filled

I have a page of thirty text boxes with Id's roughly correlating to _Q0/_Q1/_Q2/_Q3 etc.
I'm trying to design a JS code that will hide all but the first box, and then will reveal the next textbox as the previous one is filled in.
Here is my code:
$(function () {
for(var i=1;i<30;i++){
var t = i
document.getElementById("_Q" + t).style.visibility = 'hidden';
};
var idNumber = 0
document.getElementById("_Q"+idNumber).onKeyUp(function(){return boxAdder()});
function boxAdder(){
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'block';
document.getElementById("_Q" + idNumber).onKeyUp(function(){return boxAdder()});
};
});
So far all the boxes are hidden excluding the first box. However when I write into the first box nothing happens. I'm not entirely sure where this code is going wrong.
Edit: sample JSFiddle: http://jsfiddle.net/8b7pH/3/
Solved! Here is the final code:
$(function () {
for(var i=1;i<=5;i++){
var t = i;
document.getElementById("_Q" + t).style.visibility = 'hidden';
// document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder(t+1);};
}
var idNumber = 0;
document.getElementById("_Q0").onkeyup = function(){console.log("hi"); return boxAdder(0);};
function boxAdder(numm){
console.log("ho");
//idNumber = idNumber+1;
document.getElementById("_Q" + numm).style.visibility = 'visible';
document.getElementById("_Q" + numm).onkeyup = function(){return boxAdder(numm+1);};
}
});
This does what you want:
$(function () {
var $boxes = $("[id^=_Q]").hide().keyup(function(){ //Hide all, then attach keyup
var i = $(this).index(); //Index of the box being typed
$boxes.eq(i+1).show(); //Get and show next textbox
});
$boxes.first().show(); //Show next textbox
});
Btw $("[id^=_Q]") selects all elements whose id starts with _Q
Working OK here: http://jsfiddle.net/edgarinvillegas/8b7pH/7/
Cheers
My suggestion is that you assign a function to the onchange event of the text boxes, and give each one an id as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function textChange(){
// Get the number of the caller's id
var inputNumber = $(event.target).attr('id').split("txt")[1];
// Select the next input by increasing the inputNumber and set its "display" attr to block
$("#txt" + ++inputNumber).css("display", "block");
}
</script>
<from>
<input type="text" id="txt1" onchange="textChange()" />
<input type="text" style="display:none;" id="txt2" onchange="textChange()" />
<input type="text" style="display:none;" id="txt3" onchange="textChange()" />
<input type="text" style="display:none;" id="txt4" onchange="textChange()" />
<input type="text" style="display:none;" id="txt5" onchange="textChange()" />
</form>
A working example can be found here:
http://jsfiddle.net/WChd8/
Thanks for the fiddle. I've updated it to a working one.
Here's the code:
$(function () {
for(var i=1;i<=5;i++){
var t = i;
document.getElementById("_Q" + t).style.visibility = 'hidden';
}
var idNumber = 0;
document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder();};
function boxAdder(){
console.log("ho");
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'visible';
document.getElementById("_Q" + idNumber).onkeyup = function(){return boxAdder();};
}
});
The significant change was the syntax for onkeyup: element.onkeyup = function(). Other than that, there were a bunch of missing semicolons that didn't matter. I added console.logs that can obviously be removed.
EDIT
Edgar found a valid bug, so I put in a fix. Basically, remove the onkeyup event as soon as it's called:
document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};
function boxAdder(){
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'visible';
document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};
}
Note the new this.onkeyup = null; in two places.
This is a javascript only approach, based on what you already had, that also checks for the content written in the input. If is blank, it hides the next one again.
for(var i=0;i<30;i++){
var element = document.getElementById("_Q" + i);
if(element != null)
{
element.onkeyup = function() {
var next = parseInt(this.id.replace("_Q", "")) + 1;
document.getElementById("_Q" + next).style.visibility = (this.value != "" ? "visible" : "hidden");
}
}
if(i>0)
element.style.visibility = 'hidden';
};

Use an array in this function to display values of chechboxes checked

This function replicates the user experience of a Select/MultiSelect dropdown element - displaying the values of checkboxes checked in a container (adds/removes them when they're checked/unchecked), and if more than 3 items have been checked it displays the # selected instead of the values selected.
It's a combination of 2 functions and they're not playing well together when items are unchecked (i.e. it's removing the values but not the commas, doesn't work correctly when more than 3 items have been selected, etc.)
I think it would be much better if I used an array to store the values, adding/removing values from the array when items are checked/unchecked, and I know how do to in PHP but not in Javascript. This code should create the array, but I can't figure out how to integrate it into my code.
$('input:checkbox[name="color[]"]:checked').each(function () {
selectedColors.push($(this).val());
});
Existing Code:
JS
$(".dropdown_container ul li").click(function () {
var text = $(this.children[0]).find("input").val();
var text_edited = text.replace(/_/g, " ");
var currentHtml = $(".dropdown_box span").html();
var positionLocation = currentHtml.indexOf(text_edited);
var numberChecked = $('input[name="color[]"]:checked').length;
if (positionLocation < 1) {
if (numberChecked <= 3) {
$(".dropdown_box span").html(currentHtml.replace('Colors', ''));
$(".dropdown_box span").append(', ' + text_edited);
} else {
$(".dropdown_box span").html(currentHtml.replace(currentHtml, numberChecked + " Selected"));
}
} else {
(currentHtmlRevised = currentHtml.replace(text_edited, ""));
$(".dropdown_box span").html(currentHtmlRevised.replace(currentHtml));
}
});
HTML
<div class="dropdown_box"><span>Colors</span></div>
<div class="dropdown_container">
<ul id="select_colors">
<li>
<label><a href="#"><div style="background-color: #ff8c00" class="color" onclick="toggle_colorbox_alt(this);"><div class=CheckMark>✓</div>
<input type="checkbox" name="color[]" value="Black" class="cbx"/>
</div>Black</a></label>
</li>
<!-- More List Items --!>
</ul>
</div>
Easiest to just replace the entire content each time. Also use the change event instead of the click event.
$(".dropdown_container input").change(function () {
var checked = $(".dropdown_container input:checked");
var span = $(".dropdown_box span");
if (checked.length > 3) {
span.html("" + checked.length + " selected");
}
else {
span.html(checked.map(function () { return $(this).val().replace("_"," "); }).get().join(", "));
}
});
Example: http://jsfiddle.net/bman654/FCVjj/
try this:
$('.cbx').change(function(){
var cbx = $('.cbx:checked');
var str = '';
if (cbx.length<=3 && cbx.length!=0){
for (var i=0;i<cbx.length;i++){
if (i>0) str += ', ';
str += cbx[i].value;
}
} else if (cbx.length==0){
str = 'Colors';
} else {
str = cbx.length;
}
$('.dropdown_box span').html(str);
});

Disabling checkbox works, but it's not being processed on onchange

When the checkbox is set to false by the javascript function, the next function doesn't seem to know it has been set to false, it just ignores it.
HTML
<input type="checkbox" name="accs" id="50" class="arms"/>Arm 1: $50<br/>
<input type="checkbox" name="accs" id="60" class="arms"/>Arm 2: $60<br/>
<input type="checkbox" name="accs" id="70" class="neck"/>Neck 1: $70<br/>
<input type="checkbox" name="accs" id="80" class="neck"/>Neck 2: $80<br/>
<div id="total">$500</div>
Javascript: This function disables the checkbox according to the input class
$('.arms, .neck').change(function(){
var myClass = $(this).attr('class');
$('.'+myClass).not(this).prop('checked', false);
});
Javascript next function: The block of code that processes the action if the checkbox is either enabled or disabled
var input = document.getElementsByTagName("input");
var total = document.getElementById("total");
var prev;
for(i=0;i<input.length;i++){
input[i].onchange = function(){
if (this.type != 'text'){
if(this.checked){
$("#total").fadeOut(300);
$("#total").fadeIn(300);
prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) + parseFloat(this.id);
total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
}else{
$("#total").fadeOut(300);
$("#total").fadeIn(300);
prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) - parseFloat(this.id);
total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
}
}
}
}
After clicking all the checkbox you realize that it won't go back to the original price (500) but keeps on adding up.
Fiddle
The reason I haven't used radio is because the form must send the same 'input name' for all the options
I set up a fiddle here: http://jsfiddle.net/MarkSchultheiss/r6MXA/2/
Using this markup:
<input type="checkbox" name="accs" icost="50" class="arms" />Arm 1: $50
<br/>
<input type="checkbox" name="accs" icost="60" class="arms" />Arm 2: $60
<br/>
<input type="checkbox" name="accs" icost="70" class="neck" />Neck 1: $70
<br/>
<input type="checkbox" name="accs" icost="80" class="neck" />Neck 2: $80
<br/>
<div id="total">$500</div>
and this code:
var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
items.change(function () {
var myClass = $(this).attr('class');
$('.' + myClass).not(this).prop('checked', false);
var total = $('#total');
var totalcost = 0;
total.fadeOut(300);
items.filter(':checked').each(function (i) {
var cost = $(this).attr('icost');
totalcost = totalcost + parseFloat(cost);
});
total.text("$" + totalcost + ".00"); // fix your format here as needed
total.fadeIn(300);
});
EDIT: manage the whole check/uncheck cycle thing with a base on the current value in the text total area.
var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
// get the initial total and store in a data for use later (resets as needed)
var total = $('#total');
total.data("currentvalue", parseFloat(total.text().replace(/[^0-9\,]+/g, "")));
items.change(function () {
var currenttotal = total.data("currentvalue");
var myClass = $(this).attr('class');
var thisGroup = $('.' + myClass);
var notme = $('.' + myClass + ':checked').not(this);
var notmeCost = (notme.length ? notme.attr('icost') : ($(this).is(':checked') ? 0 : $(this).attr('icost')));
notme.prop('checked', false);
currenttotal = currenttotal - notmeCost;
total.fadeOut(300);
thisGroup.filter(':checked').each(function (i) {
var cost = $(this).attr('icost');
currenttotal = currenttotal + parseFloat(cost);
});
total.data("currentvalue", currenttotal);
total.text("$" + currenttotal + ".00"); // fix your format here as needed
total.fadeIn(300);
});

Categories