I am trying to calculate the values of radio buttons and checkboxes.
I have the radio buttons working as required but cannot get the script right for the checkboxes.
I want the check boxes to have a sub total (which is working fine) and then have that subtotal added to the calculation of the radio buttons. Below is what I have so far.
Any suggestions would be appreciated.
Thanks.
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p><input id="rdo_1" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p><input id="rdo_1" type="radio" value="3" name="price3" onClick="DisplayPrice(this.value);"><label for="ra1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price3" onClick="DisplayPrice(this.value);"><label for="ra2">Radio 2</label></p>
<p><input id="rdo_2" type="radio" value="1" name="price3" onClick="DisplayPrice(this.value);"><label for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01" value="300"/><label for="check01">Check 1</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG" id="check02" value="200"/><label for="check02">Check 2</label></p>
<p><input onClick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG" id="check03" value="200"/><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly" >
</form>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
</script>
<hr>
<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for( i = 0; i < document.form4.price4.length; i++ ){
val4 = document.form4.price4[i].value;
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>
In Javascript if there is single texbox of a specific name then length function will be return undefined.
Here you can do two things.
First there is only single field of subtotal so u can assign value direct to val4 like given below
val4 = document.form4.price4.value;
Second If you want to run for loop then
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
Edited
In function
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("price4")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}
finalResult();
}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
function finalResult(){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.price3.length; i++ ){
if( document.form3.price3[i].checked == true ){
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
var form4 = document.form4.getElementsByTagName('input');
for( i = 0; i < form4.length; i++ ){
if(form4[i].type == 'text' && form4[i].name == 'price4'){
if(isNaN(parseInt(form4[i].value)) == false){
val4 = parseInt(parseInt(val4) + parseInt(form4[i].value));
}
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value=sum;
}
</script>
i hope it will be work for you
thanks
In your code you are trying to add value of "price4" which is blank at start.... try adding value of "valueTotal" which is total of radiobuttons value
Try this code... same code with some modifications
<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price" onclick="DisplayPrice(this.value);"><label
for="radio1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price" onclick="DisplayPrice(this.value);"><label
for="radio2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price" onclick="DisplayPrice(this.value);"><label
for="radio3">Radio 3</label></p>
</form>
<hr>
<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p>
<input id="rdo_1" type="radio" value="100" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="200" name="price2" onclick="DisplayPrice(this.value);"><label
for="rad2">Radio 2</label></p>
</form>
<hr>
<form name="form3" id="form3" runat="server">
<legend>Header 3</legend>
<p>
<input id="rdo_1" type="radio" value="3" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra1">Radio 1</label></p>
<p>
<input id="rdo_2" type="radio" value="2" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra2">Radio 2</label></p>
<p>
<input id="rdo_2" type="radio" value="1" name="price3" onclick="DisplayPrice(this.value);"><label
for="ra3">Radio 3</label></p>
</form>
<hr>
<form name="checkboxCalc" id="checkboxCalc">
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_FBB" id="check01"
value="300" /><label for="check01">Check 1</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_RHFG"
id="check02" value="200" /><label for="check02">Check 2</label></p>
<p>
<input onclick="clickCh(this)" type="checkbox" class="checkbox" name="PROD_LHFG"
id="check03" value="200" /><label for="check03">Check 3</label></p>
</form>
<br />
<form name="form4" id="form4" runat="server">
<label for="check01">
Sub Total: </label><input id="price4" type="text" name="price4" readonly="readonly">
</form>
<p>
<label for="valueTotal">
Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2" readonly="readonly"></p>
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("valueTotal")
var result = document.getElementById("price4")
function clickCh(caller)
{
if (caller.checked)
{
add(caller)
} else
{
subtract(caller)
}
}
function add(caller) { result.value = total.value * 1 + caller.value * 1 }
function subtract(caller) { result.value = result.value * 1 - caller.value * 1 }
</script>
<hr>
<script type="text/javascript">
function DisplayPrice(price)
{
var val1 = 0;
for (i = 0; i < document.form1.price.length; i++)
{
if (document.form1.price[i].checked == true)
{
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for (i = 0; i < document.form2.price2.length; i++)
{
if (document.form2.price2[i].checked == true)
{
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for (i = 0; i < document.form3.price3.length; i++)
{
if (document.form3.price3[i].checked == true)
{
val3 = document.form3.price3[i].value;
}
}
var val4 = 0;
for (i = 0; i < document.form4.price4.length; i++)
{
val4 = document.form4.price4[i].value;
}
var sum = parseInt(val1) + parseInt(val2) + parseInt(val3) + parseInt(val4);
document.getElementById('valueTotal').value = sum;
}
</script>
Thank you. hope it will work
Related
I need some guidance in how to add my selection list to my total. I am still new to javascript so i did what i could but for some reason, i cannot figure out how to add the selection list to my total. the textboxes with 0.00 are there for me to see if the radios, checkboxes and selection are adding up properly.
``
`
function customerInfo(cName){
var dinerName = document.getElementById(cName).value;
document.getElementById('cust_name').innerHTML = dinerName;
}
// format val to n number of decimal places
function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
while (str.length <= n) {
str = "0" + str;
}
var pt = str.length - n;
return str.slice(0,pt) + "." + str.slice(pt);
}
function getRadioVal(form, name) {
var radios = form.elements[name];
var val;
for (var i=0, len=radios.length; i<len; i++) {
if ( radios[i].checked == true ) {
val = radios[i].value;
break;
}
}
return val;
}
function getToppingsTotal(e) {
var form = this.form;
var val = parseFloat( form.elements['tops_tot'].value );
if ( this.checked == true ) {
val += parseFloat(this.value);
} else {
val -= parseFloat(this.value);
}
form.elements['tops_tot'].value = formatDecimal(val);
updatePizzaTotal(form);
}
function getSizePrice(e) {
this.form.elements['sz_tot'].value = parseFloat( this.value );
updatePizzaTotal(this.form);
}
function getDeliveryPrice(e){
selectElement = document.querySelector('#pick_delivery');
output = selectElement.options[selectElement.selectedIndex].value;
console.log(output);
}
function updatePizzaTotal(form) {
var sz_tot = parseFloat( form.elements['sz_tot'].value );
var tops_tot = parseFloat( form.elements['tops_tot'].value );
form.elements['total'].value = formatDecimal( sz_tot + tops_tot );
}
// removes from global namespace
(function() {
var form = document.getElementById('pizzaForm');
var el = document.getElementById('pizza_toppings');
// input in toppings container element
var tops = el.getElementsByTagName('input');
for (var i=0, len=tops.length; i<len; i++) {
if ( tops[i].type === 'checkbox' ) {
tops[i].onclick = getToppingsTotal;
}
}
var sz = form.elements['size'];
for (var i=0, len=sz.length; i<len; i++) {
sz[i].onclick = getSizePrice;
}
// set sz_tot to value of selected
form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'size') ) );
updatePizzaTotal(form);
})(); // end remove from global namespace and invoke
<form name="pizzaOrder" method="post" id="pizzaForm" enctype="text/plain">
<fieldset style="width: 60%;">
<legend>Create Your Pizza</legend>
<h3>Customer's Name:</h3>
<p>
<input type="text" name="client_name" id="client_name" value="First and Last Name" size="30" value="" />
<input type="button" onclick="customerInfo('client_name')" value="Enter"></button>
</p>
<h3>Pick Your Size:</h3>
<p>
<label><input type="radio" name="size" value="8" /> Small</label>
<label><input type="radio" name="size" value="10" /> Medium</label>
<label><input type="radio" name="size" value="12" /> Large</label>
<label><input type="radio" name="size" value="14" checked/> Extra Large</label>
<input type="text" name="sz_tot" value="0.00" />
</p>
<h3>Pick Your Toppings</h3>
<p id="pizza_toppings">
<label><input type="checkbox" name="Pineapple" value="1.50" /> Pineapple</label>
<label><input type="checkbox" name="Onions" value="1.50" /> Onions </label>
<label><input type="checkbox" name="Ham" value="1.50" /> Ham</label>
<label><input type="checkbox" name="Sausage" value="1.50" /> Sausage</label>
<label><input type="checkbox" name="Pepperoni" value="1.50" /> Pepperoni</label>
<input type="text" name="tops_tot" value="0.00" />
</p>
<h3>Delivery Or Pick Up</h3>
<p>
<select class="delivery" id="pick_delivery" size="2">
<option value="0">Pick Up: Free</option>
<option value="2">Delivery: $2</option>
</select>
<input type="button" onclick="getDeliveryPrice()" id="delivery_pick" value="enter" /></button>
</p>
<p>
<label>Total: $ <input type="text" name="total" class="num" value="0.00" readonly="readonly" /></label>
</p>
<p>
<input type="button" value="Confirm" />
<input type="button" value="Cancel">
</p>
</fieldset>
</form>
<div>
<h2>Your Order:</h2>
<p>
<h4>Your Name: <span id="cust_name"> </span></h4>
<h4>Your Pizza Size:</h4>
<h4>Toppings Selected:</h4>
</p>
</div>
</fieldset>
</form>```
On the bottom of the page the results should look similar to this:
Your Name: Pam Love
Pizza Size Selected: Extra Large
Toppings Selected: Bacon, Pineapple, Ham
Total: 20.50
When clicked on confirm order, the onclick button should redirect the page to a new tab that says:
Your order will be ready in 20 minutes.
or if cancelled then the user clicks the cancel button also redirected to a new tab:
Your order is cancelled.
You can just use some css selectors to accomplish most of this.
Here is how you can get your selected size:
document.querySelector('input[type="radio"][name="size"]:checked').value
And here is how you can get the list of toppings:
[...document.querySelectorAll('input[type="checkbox"][name="topping"]:checked')].map((t) => t.value).join(', ')
The remaining things should be pretty easy to find using querySelector or getElementById
I am looking for a way to add the value from (discount) and (quantity) to my total. As for discount part, the customer will need to enter the right code to receiver discount. And for quantity, when clicked at the checkbox, then change the quantity, the total will also follow. Can you guys help me out on this problem?
thanks
(sorry, my English is not good)
function addItemPrice() {
var total = 0;
var count = 0;
for (var i = 0; i < document.myform.item.length; i++) {
if (document.myform.item[i].checked) {
total = (total + document.myform.item[i].value * 1); // another way to convert string to number
count++;
}
}
return total;
}
var sh_prices = new Array();
sh_prices["standard"] = 10;
sh_prices["express"] = 20;
function getAddShipping() {
var shippingPrice = 0;
var theForm = document.forms["myform"];
var shipping = theForm.elements["shipping"]
for (var i = 0; i < shipping.length; i++) {
if (shipping[i].checked) {
shippingPrice = sh_prices[shipping[i].value];
break;
}
}
return shippingPrice;
}
function getCode() {
var theForm = document.forms["myform"];
var discode = theForm.elements["discount"]
if (discode == "UAC123") {
alert("yes");
} else {
alert("no")
}
}
function getTotal() {
var totalPrice = getAddShipping() + addItemPrice();
document.getElementById('Price').innerHTML = "the total price" + totalPrice;
}
<form name="myform">
Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity"><br> Sickle $1 <input type="checkbox" name="item" value="1" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $50 <input type="checkbox" name="item" value="50" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $5 <input type="checkbox" name="item" value="5" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Sickle $7 <input type="checkbox" name="item" value="7" onclick="getTotal(item)">
<input type="number" name="quantity" value="1"><br> Standard
<input type="radio" name="shipping" value="standard" onClick="getTotal(shipping)" /> Express
<input type="radio" name="shipping" value="express" onClick="getTotal(shipping)" /> <br> Discount code
<input type="text" name="discount" size=15>
<input type="button" id="code" value="check" onClick="getCode(code)">
<div id="Price">
</div>
</form>
Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.
Just add "script" tag in your html before function start which indicate javascripts code.
**I have a php page with an array of option like this... and I need to get by javascript **the index of the selected option. Above I put the code of the javascript that is not working... Any help will be appreciated!
<input type="radio" name="option[1]" value="1">
<input type="radio" name="option[1]" value="2">
<input type="radio" name="option[1]" value="3">
<input type="radio" name="option[1]" value="4">
<input type="radio" name="option[2]" value="1">
<input type="radio" name="option[2]" value="2">
<input type="radio" name="option[2]" value="3">
<input type="radio" name="option[2]" value="4">
<input type="radio" name="option[3]" value="1">
<input type="radio" name="option[3]" value="2">
<input type="radio" name="option[3]" value="3">
<input type="radio" name="option[3]" value="4">
...
Can anyone help me?
I am trying something like this but it didn´t work
<script type="text/javascript">
function validateForm(form) {
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
if (form.elements[i].value == 1 || form.elements[i].value == 6){
var comentario=document.getElementsByName('comentario[]'[i]);
var opcao = form.elements[i];
alert(clickedElm(opcao));
submitFlag = true;
if (comentario.value.length < 100){
submitFlag=false;
alert(i);
}
return submitFlag;
}
}
}
}
}
function clickedElm(element)
{
var index = 0;
for (var i = 0; document.forms[0].elements.length; i++)
{
if (document.forms[0].elements[i] == element)
{
index = i;
}
}
return index;
}
</script>
If I correctly understood the questuion, it can be solved like this:
$(document).on('change','input[type=radio]', function(){
alert($(this).prop('name').charAt(7));
});
Here is fiddle http://jsfiddle.net/Goodluck/ynkgr/
the name attribute is used for group the radio buttons, you have to use the id attribute to access the control asking if it's checked.
Example
<html>
<head>
</head>
<body>
<form id="frmTest">
<input type="radio" name="option[1]" id="option1-item1" value="1" >
<input type="radio" name="option[1]" id="option1-item2" value="2" >
<input type="radio" name="option[1]" id="option1-item3" value="3" >
<input type="radio" name="option[1]" id="option1-item4" value="4" >
<input type="radio" name="option[2]" id="option2-item1" value="1" >
<input type="radio" name="option[2]" id="option2-item2" value="2" >
<input type="radio" name="option[2]" id="option2-item3" value="3" >
<input type="radio" name="option[2]" id="option2-item4" value="4" >
<input type="radio" name="option[3]" id="option3-item1" value="1" >
<input type="radio" name="option[3]" id="option3-item2" value="2" >
<input type="radio" name="option[3]" id="option3-item3" value="3" >
<input type="radio" name="option[3]" id="option3-item4" value="4" >
</form>
<input type="button" onclick="validateForm(document.getElementById('frmTest'))" />
<script type="text/javascript">
function validateForm(form) {
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
if (form.elements[i].value == 1 || form.elements[i].value == 6){
var comentario=document.getElementsByName('comentario[]'[i]);
var opcao = form.elements[i];
alert(clickedElm(opcao));
submitFlag = true;
if (comentario.value.length < 100){
submitFlag=false;
alert(i);
}
return submitFlag;
}
}
}
}
}
function clickedElm(element)
{
return element.id;
}
</script>
</body>
</html>
You forgot to check the condition in this line:
(the loop in function clickedElm)
for (var i = 0; document.forms[0].elements.length; i++)
So, you enter in an infinite loop.
the correct line:
for (var i = 0; i < document.forms[0].elements.length; i++)
I'm attempting to make a code that will display the divs when checked and also add the values of the checkboxes together. I've managed to come up with this but now I want to make some of the checkboxes checked and their values added together by default. I can make the checkbox checked, however, I need the value to be added by default as well. Any help would be appreciated. Here is my code:
a
This is the first paragraph
This is the second paragraph
This is the third paragraph
<form name="formex">
<input onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10"> $10.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="two" value="12"> $12.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="three" value="1"> $1.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="four" value="2"> $2.00<br>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="five" value="24"> $24.00<br>
<br>
<input id="total" type="text" name="total">
</form>
My script
<script language="JavaScript" type="text/javascript">
var total = document.getElementById("total")
function clickCh(caller){
if(caller.checked){
add(caller)
} else {
subtract(caller)
}}
function add(caller){ total.value = total.value*1 + caller.value*1}
function subtract(caller){ total.value = total.value*1 - caller.value*1}
function showPara()
{
document.getElementById("first").style.display=(document.formex.one.checked) ? "inline" : "none";
document.getElementById("second").style.display=(document.formex.two.checked) ? "inline" : "none";
document.getElementById("third").style.display=(document.formex.three.checked) ? "inline" : "none";
return true;
}
</script>
jsFiddle: http://jsfiddle.net/TCZ6t/1/
You should be able to just add the attribute "checked" to the end of the tag to have it checked by default. In other words, if I wanted $10 to be checked by default I would just change the tag to:
<input checked onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10" checked> $10.00<br>
You could just loop all the checked checkboxes and call the add method like
var els = document.querySelectorAll('form[name="formex"] input[type="checkbox"]');
for (var i = 0; i < els.length; i++) {
if (els[i].checked) {
add(els[i])
}
}
Demo:
var total = document.getElementById("total");
function clickCh(caller) {
if (caller.checked) {
add(caller)
} else {
subtract(caller)
}
}
function add(caller) {
total.value = total.value * 1 + caller.value * 1
}
function subtract(caller) {
total.value = total.value * 1 - caller.value * 1
}
function showPara() {
document.getElementById("first").style.display = (document.formex.one.checked) ? "inline" : "none";
document.getElementById("second").style.display = (document.formex.two.checked) ? "inline" : "none";
document.getElementById("third").style.display = (document.formex.three.checked) ? "inline" : "none";
return true;
}
var els = document.querySelectorAll('form[name="formex"] input[type="checkbox"]');
for (var i = 0; i < els.length; i++) {
if (els[i].checked) {
add(els[i])
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first" style="display:none;">This is the first paragraph</div> <br />
<div id="second" >This is the second paragraph</div> <br />
<div id="third" style="display:none;">This is the third paragraph</div> <br />
<form name="formex">
<input onclick="clickCh(this) ; showPara()" class="classone" type="checkbox" name="one" value="10"/> $10.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="two" value="12"/> $12.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="three" value="1"/> $1.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="four" value="2" checked /> $2.00<br/>
<input onclick="clickCh(this) ; showPara()" type="checkbox" name="five" value="24" checked /> $24.00<br/>
<br/>
<input id="total" type="text" name="total"/>
</form>