As per the requirement i have to create xhtml dynamically as described below
<ul class="checklist">
<li>
<input type="checkbox" name="level[1]" value="1" onclick="checkAll(this)" id="level[1]">
<label for="level[1]">Unit 1</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[1][1]" value="1" onclick="checkTop()" id="courses[1][1]">
<label for="courses[1][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[1][2]" value="2" onclick="checkTop()" id="courses[1][2]">
<label for="courses[1][2]">Module 2</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="level[2]" value="2" onclick="checkAll(this)" id="level[2]">
<label for="level[2]">Unit 2</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[2][1]" value="1" onclick="checkTop()" id="courses[2][1]">
<label for="courses[2][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[2][2]" value="2" onclick="checkTop()" id="courses[2][2]">
<label for="courses[2][2]">Module 2</label>
</li>
</ul>
</li>
</ul>
I want to check / Uncheck all module checkboxes on the selection of its associated parent level. Here is my javascript function.
function checkAll(obj){
var element = document.accessForm.elements["courses["+obj.value+"]"];
alert(element);
if(obj.checked){
for(i=0;i<element.length;i++){
element[i].checked = true;
}
}else{
for(i=0;i<element.length;i++){
element[i].checked = false;
}
}
}
But when i display element variable then get the response "Undefined".
Can anybody please help
use this function:
function checkAll(obj){
var element = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].name.indexOf('courses[' + obj.value + ']') == 0)
{
element.push(inputs[i]);
}
}
if(obj.checked){
for(i=0;i<element.length;i++){
element[i].checked = true;
}
}else{
for(i=0;i<element.length;i++){
element[i].checked = false;
}
}
}
add this function to your code:
function checkTop(obj)
{
var temp = obj.name;
var first_index1 = temp.indexOf('[');
var first_index2 = temp.indexOf(']');
temp = temp.substring(first_index1 + 1, first_index2);
var element = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].name.indexOf('courses[' + temp + ']') == 0)
{
element.push(inputs[i]);
}
}
var count_checked = 0;
var count_not_checked = 0;
for(var i = 0; i < element.length; i++)
{
if (element[i].checked)
count_checked++;
else
count_not_checked++;
}
var parent = document.getElementById("level[" + temp + "]");
if (count_checked == element.length)
{
parent.checked = true;
}
if (count_not_checked == element.length)
{
parent.checked = false;
}
}
and change html code to this:
<ul class="checklist">
<li>
<input type="checkbox" name="level[1]" value="1" onclick="checkAll(this)" id="level[1]">
<label for="level[1]">Unit 1</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[1][1]" value="1" onclick="checkTop(this)" id="courses[1][1]">
<label for="courses[1][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[1][2]" value="2" onclick="checkTop(this)" id="courses[1][2]">
<label for="courses[1][2]">Module 2</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="level[2]" value="2" onclick="checkAll(this)" id="level[2]">
<label for="level[2]">Unit 2</label>
<ul class="subchecklist">
<li>
<input type="checkbox" checked="checked" name="courses[2][1]" value="1" onclick="checkTop(this)" id="courses[2][1]">
<label for="courses[2][1]">Module 1</label>
</li>
<li>
<input type="checkbox" checked="checked" name="courses[2][2]" value="2" onclick="checkTop(this)" id="courses[2][2]">
<label for="courses[2][2]">Module 2</label>
</li>
</ul>
</li>
</ul>
I'm sure it helps!
Related
I want to make a counter that shows how many checkboxes are in the checkbox list in the html page. My code is as below. The counter that I show in HTML is not updated, why?
I may not be able to capture the checkbox value in the if block.
var clicks = 0;
function checkboxes() {
var inputElems = document.getElementsByTagName("input"),
for (var i = 0; i < inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
} else {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
}
}
}
<div class="addto-playlists">
<ol>
<li>
<label for="random-1" class="playlist-name">
<input id="random-1" type="checkbox" name="mycheckbox" value=578080>
xxxx
</label>
</li>
<li>
<label for="random-1" class="playlist-name">
<input id="random-1" type="checkbox" name="mycheckbox" value=1234>
xxxx
</label>
</li>
<li>
<label for="random-1" class="playlist-name">
<input id="random-1" type="checkbox" name="mycheckbox" value=567>
xxxx
</label>
</li>
</ol>
</div>
<p>clicks: <a id="clicks">0</a></p>
Seems you haven't called checkboxes() method.
The logic you've written seems to be wrong. Here is the working solution
document.getElementById("checkbox-list").addEventListener("click", checkboxes);
function checkboxes() {
var inputElems = document.getElementsByTagName("input");
var clicks = 0;
for (var i = 0; i < inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
clicks += 1;
}
document.getElementById("clicks").innerHTML = clicks;
}
}
<div class="addto-playlists">
<ol id="checkbox-list">
<li>
<label for="random-1" class="playlist-name">
<input id="random-1" type="checkbox" name="mycheckbox" value=578080>
xxxx
</label>
</li>
<li>
<label for="random-1" class="playlist-name">
<input id="random-2" type="checkbox" name="mycheckbox" value=1234>
xxxx
</label>
</li>
<li>
<label for="random-1" class="playlist-name">
<input id="random-3" type="checkbox" name="mycheckbox" value=567>
xxxx
</label>
</li>
</ol>
</div>
<p>clicks: <a id="clicks">0</a></p>
I am trying to generate an array to be submitted to an ajax call via jQuery. Here is my HTML and JavaScript:
//Following is the JavaScript I use to generate the variables from checked checkboxes
jQuery(document).on("click", ".refno", function() {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists = [];
var tutearray = {};
jQuery('.datarefindex_' + refindex).each(function() {
var subjid = jQuery(this).data("subjid");
i++;
tutearray["id"] = subjid;
tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
return this.value;
}).get();
});
tutelists.push(tutearray);
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
1105898
<ul>
<li>
<div>Title 1</div>
<ul class="datarefindex_1" data-subjid="opt471821">
<li>
<label class="tutebtn" for="1_opt471821_1">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt471821_2">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 2</div>
<ul class="datarefindex_1" data-subjid="opt1215754">
<li>
<label class="tutebtn" for="1_opt1215754_1">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt1215754_2">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 3</div>
<ul class="datarefindex_1" data-subjid="opt3062581">
<li>
<label class="tutebtn" for="1_opt3062581_1">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt3062581_2">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label>
</li>
</ul>
</li>
</ul>
<div id="responsecontainer"></div
>
The result I receive is as follows (I have checked the first 3 boxes in each list);
{"id":"opt3062581","issuedtutes1":["1","2","3"],
"issuedtutes2":["1","2","3"],
"issuedtutes3":["1","2","3"]}
However the desired result is as follows;
{"id":"opt471821","issuedtutes":["1","2","3"]},
{"id":"opt1215754","issuedtutes":["1","2","3"]},
{"id":"opt3062581","issuedtutes":["1","2","3"]}
Couldn't figure out what am I missing. When i remove the id part from the function, this returns {"id":"opt3062581","issuedtutes":["1","2","3"]} which is the data from the last list. Please help.
Number of tute lists is dynamic and not fixed.
Your expected output looks like a list of objects, so tutelists should be a list not an object.
jQuery(document).on("click", ".refno", function() {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists = [];
jQuery('.datarefindex_' + refindex).each(function() {
var subjid = jQuery(this).data("subjid");
i++;
var tutearray = {};
tutearray["id"] = subjid;
tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
return this.value;
}).get();
tutelists.push(tutearray);
});
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1105898
<ul>
<li>
<div>Title 1</div>
<ul class="datarefindex_1" data-subjid="opt471821">
<li>
<label class="tutebtn" for="1_opt471821_1">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt471821_2">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 2</div>
<ul class="datarefindex_1" data-subjid="opt1215754">
<li>
<label class="tutebtn" for="1_opt1215754_1">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt1215754_2">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 3</div>
<ul class="datarefindex_1" data-subjid="opt3062581">
<li>
<label class="tutebtn" for="1_opt3062581_1">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt3062581_2">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label>
</li>
</ul>
</li>
</ul>
<div id="responsecontainer"></div
>
Your id value will be replaced with new newer one. Please try to use push() method of array to make it workable.
jQuery(document).on("click", ".refno", function () {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists =[];
tutelistElement = {};
jQuery('.datarefindex_'+ refindex ).each(function(){
var subjid = jQuery(this).data("subjid");
i++;
tutelistElement["id"] = subjid;
tutelistElement["issuedtutes"+i] = jQuery("input[name=tuteset_"+refindex+"_"+subjid+"]:checked").map(function () { return this.value; }).get();
});
tutelists.push(tutelistElement);
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
I am trying to get to <label> tag right under the <input> tag for later styling purposes. I tried with .firstElementChild, which gives me a null value. How can I get to label tag of clicked checkbox field? This is my code:
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.firstElementChild);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>
It seems like you quite don't know what child elements and siblings are.
Consider the following for children:
<div id="parent">
<div id="child">I'm the child of my parent.</div>
</div>
And the following for siblings:
<div id="sibling1"></div>
<div id="sibling2">I'm the sibling of sibling1.</div>
In your code, those labels are siblings of your input elements.
So in your script, change console.log(targetCb.firstElementChild); to console.log(targetCb.nextElementSibling);
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.nextElementSibling);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>
Change
var targetCb = e.target;
to var targetCb = e.target.nextElementSibling;
I want a variable (chanceoflive) to be stored with localStorage. Then, I have radio buttons. I want it so that depending on which radio button is selected, the variable chanceoflive will be changed. This is what I have:
var chanceoflive = 0;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive(){
if (user == brick) {
chanceoflive += 1;
}
else if (user == wood) {
chanceoflive +=3
}
else if (user == stone) {
chanceoflive +=2
}
localStorage.setItem("chanceoflive", chanceoflive);
}
function test(click){
alert(chanceoflive);
}
<div id="radiobuttons" class="container" name="buttons" align=center>
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('Bricks')">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('Wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('Stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<form action="chooseheight.html">
<div class="wrapper">
<button class="button" onClick="test();changechanceoflive()" align=center>Submit</button>
</div>
</form>
Although, it always just alerts 0. Is it a problem with localStorage or something else?
I fixed your code:
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('bricks')">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
JS
var chanceoflive = 0;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive(){
if (user == 'bricks') {
chanceoflive += 1;
}
else if (user == 'wood') {
chanceoflive +=3
}
else if (user == 'stone') {
chanceoflive += 2
}
localStorage.setItem("chanceoflive", chanceoflive);
}
function test(click){
alert(chanceoflive);
alert(localStorage.chanceoflive);
}
But with your code, if the user reload the page and then didn't select any radio, the localStorage variable will be reset to 0 because your have
var chanceoflive = 0;
If you want to keep the last saved value, you must replace that line by:
var chanceoflive = localStorage.chanceoflive;
To answer your part about LocalStorage, just set/get your variables like a regular Javascript object. More info: mrkdown.io/t32iomd
I have 4 checkboxes with labels and a total label in my webpage. The labels are the price e.g. $12, $100. When the user checks a box I want to take the value from the label and put it in the total label. Then if the user deselect the box, then subtract that value from the total label.
I have tried to set a function called checkbox2() where I took the value and stripped the '$' then turned the remaining string into a number. Then checked if the box was checked, if so, then add number. then convert back to string and set the innerHTML. Did not work and I am sure not the way to do this.
How should I go about this?
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2()"/> $125
</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2()"/> $100
</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2()" /> $75
</label>
</div>
<div class ="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2()" /> $50
</label>
</div>
<div class ="pwrap">
<p class="cat1"><b><u>Total</u></b></p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>
JS:
var k = document.getElementById("totallbl").innerHTML;
if (document.getElementById("check1").checked) {
x = "150";
} else {
x = "0";
var res = k + x;
document.getElementById("totallbl").innerHTML = res;
}
your html was also not correct. Try this
function checkBox2(checkbox) {
if (checkbox.checked) {
var value = checkbox.parentNode.textContent.match(/\s*\d+(?:\.\d{2})?/)[0];
var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\s*\d+(?:\.\d{2})?/)[0];
var newTotalValue = parseFloat(value) + parseFloat(totalValue);
document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue;
document.getElementById('agreedLBL').innerText = newTotalValue;
} else {
var value = checkbox.parentNode.textContent.match(/\s*\d+(?:\.\d{2})?/)[0];
var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\s*\d+(?:\.\d{2})?/)[0];
var newTotalValue = parseFloat(totalValue) - parseFloat(value);
document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue;
document.getElementById('agreedLBL').innerText = newTotalValue;
}
}
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" /> $125</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" /> $100</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" /> $75</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" /> $50</label>
</div>
<div class="pwrap">
<p class="cat1"><b><u>Total</u></b></p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>
Basically, you should be setting html in a way so that it's easy to access values associated with checkboxes. Please note data-value="0" on totallbl and value assigned for each input checkbox.
function checkBox2(obj) {
var k = parseInt(document.getElementById("totallbl").dataset.value);
if (obj.checked) {
k += parseInt(obj.value);
} else {
k -= parseInt(obj.value);
}
document.getElementById("agreedLBL").innerHTML = k;
document.getElementById("totallbl").dataset.value = k;
document.getElementById("totallbl").innerHTML = '$' + k;
}
<div class="cbwrap"><label for="check1" name="label2" id="label2"><input type="checkbox" class="cb" id="check1" onclick="checkBox2(this);" value="150" /> $150</label></div>
<div class="cbwrap"><label for="check2" name="label2" id="label2"><input type="checkbox" class="cb" id="check2" onclick="checkBox2(this);" value="125" /> $125</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" id="check3" onclick="checkBox2(this);" value="100" /> $100</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="75" /> $75</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="50" /> $50</label></div>
<div class="pwrap"><p class="cat1"><b><u>Total</u></b></p></div>
<div class="cbwrap"><label for="total" name="totallbl" id="totallbl" data-value="0" style="font-weight:bold;text-decoration:underline">$0</label></div>
<div> <label for="total" name="agreedLBL" id="agreedLBL">0</label></div>
HEllo Dear it complete running example and please add jquery cdn in head tag.
if you not getting exact output then tell me..
<body>
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" />
$125</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" />
$100</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" />
$75</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" />
$50</label>
</div>
<div class="pwrap">
<p class="cat1">
<b><u>Total</u></b>
</p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>
<script>
function checkBox2(tempCheckBOx) {
var tempLenght = $(".cbwrap label input[type='checkbox']").length;
var tempTotal = 0;
for (var i = 0; i < tempLenght; i++) {
if ($(".cbwrap label input[type='checkbox']").eq(i).prop('checked') == true) {
var tempStore = $(".cbwrap label").eq(i).text();
var tempVal = parseInt(tempStore.trim().substr(1, (tempStore.length + 1)));
tempTotal += tempVal;
}
}
$("#agreedLBL").text("$"+tempTotal);
}
</script>
</body>
$(document).ready(function(){
$('.cb').click(function(){
var totalvaluestored = document.getElementById('totallbl').innerText.replace(/\$/g, '');
var value = this.value;
if(totalvaluestored === "0"){
document.getElementById('totallbl').innerHTML = '$'+value;
this.value = "";
}
else if(totalvaluestored !== "0" && value !== "")
{
value = parseInt(totalvaluestored) + parseInt(value);
document.getElementById('totallbl').innerHTML = '$ '+value;
this.value = "";
}
else{
var value = this.closest('label').innerText;
value = value.replace(/\$/g, '');
this.value = value;
value = parseInt(totalvaluestored) - parseInt(value);
document.getElementById('totallbl').innerHTML = '$ '+value;
}
});
});