JavaScript - change value of output based on checkboxes selected

Question

I'm fairly new to JavaScript and am trying to write some code that lists three price options in a form, as checkboxes. If both of the first two are selected, I want the total price to drop by a certain amount.

My code is based on the code in this question: Javascript checkboxes incorrect calculating

They reset the base value by a date variable. I assume that if I have a function that sets the base to a negative value if those two boxes are checked, that would achieve what I want. I'd also like the output to have an additional tag of 'save (x) per month' when this happens.

However I'm not sure how to go about relating the variable to the checkboxes.. do I need to use jquery as per how to change the value of a variable based on a select option:selected?

Ibu · Accepted Answer · 2011-07-31 23:26:52Z

1

Jquery is never necessary, but it is always a plus. since you are learning javascript, i would recommend not using the framework yet.

First you need a form (it would be better if you showed us what your form looks like):

<form>

<input type="checkbox" id="first" /><label for="first">First Box</label> <br>
<input type="checkbox" id="second" /><label for="second">First Box</label> <br>

<input type="text" id="output" value="5.00"/>

</form>

Now the javascript

<script type="text/javascript">
  var first = document.getElementById("first");
  var second = document.getElementById("second");

  first.onchange = function () {
    if (this.checked == true) {
        document.getElementById("output").value = "new Value";
    }else {
        document.getElementById("output").value = "other Value";
    }
  }

  ... the same can be done for 'second' ....
</script>

answered Jul 31, 2011 at 23:26

Ibu

44k14 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pikelet Over a year ago

<label><input type="checkbox" rel="99" name="Mail" id-"Mail" />Mail & Parcel Collection - $99/month</label><br>                <label><input type="checkbox" rel="149" name="CallAnsw" id="CallAnsw" />Call Answering - $149/month</label><br> 			   <label><input type="checkbox" rel="15" name="CallFwd" id="CallFwd" />Call Forwarding - $15/month</label>

So if you select both mail collection & call answering, it'd be offered at a discounted $229 instead of $248, but Call Forwarding is always $15.

gilly3 · Accepted Answer · 2011-07-31 23:42:11Z

0

I'm assuming you are modifying your recalculate() function from your earlier question. In that function, after you get your sum, add this to apply the discount:

if ($("#chkBox1,#chkBox2").filter(":checked").length == 2)
{
    sum -= discount;
}

To write the message to your output, modify your $("#output").html(sum) code to this:

$("#output").html(sum + " Save $" + discount + " per month");

answered Jul 31, 2011 at 23:42

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Comments

ReX357 · Accepted Answer · 2011-07-31 23:18:56Z

0

if (document.getElementById('checkBox1').checked && document.getElementById('checkBox2').checked) {
    // Change the price
}

answered Jul 31, 2011 at 23:18

ReX357

1,2293 gold badges20 silver badges45 bronze badges

Comments

hayesgm · Accepted Answer · 2011-07-31 23:23:22Z

There are many ways to address this issue. As a reminder before I get into it, never do something like 'calculating price' on the client-side. That is, you can calculate the price so show the user, but any real calculations should be done on the server side (as clients can adjust and manipulate form submissions).

I created a simple example that will tally the results of checked checkboxes (and simply displays the result). There are lots of ways you can manipulate this code to fit your purpose. I have used jQuery, but there are other interesting options for this problem (check out KnockoutJS, for instance).

 <input type="checkbox" class="adjust one" data-value="1.00" id="so1" /> <label for="so1">$1.00</label> <br/>
 <input type="checkbox" class="adjust two" data-value="2.00" id="so2" /> <label for="so2">$2.00</label><br/>
 <input type="checkbox" class="adjust one" data-value="3.00" id="so3" /> <label for="so3">$3.00</label>

 <p>
   Total: <span class="total"></span>
 </p>

Then, you want to include the following JavaScript (along with the jQuery library).

 var total;

 var calculateTotal = function() {
   total = 0.0;
   $('input[type="checkbox"]:checked').each(function() {
      total += parseFloat($(this).data('value')); 
   });
   $('.total').text(total);  
 };

 $(document).ready(function() {

   $('input[type="checkbox"]').live('change', function() {
     calculateTotal();
   });

   calculateTotal(); //do it for initial price
 });

calculateTotal() will calculate a total based on the checkboxes (inputs of type checkbox) which match the selector "checked". This then pulls the data attribute "value" from each checkbox and calculates a total based on that number. The logic for your problem is likely to differ, but simply adjusting calculateTotal should handle this. Finally, the calculateTotal function gets called whenever a checkbox is 'changed' (and once initially).

Hopefully this should be a big help in getting you up and running. Here is a JSFiddle live demonstration.

Collectives™ on Stack Overflow

JavaScript - change value of output based on checkboxes selected

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related