How to check multiple checkboxes in Javascript

Question

I've just started to learn JavaScript and have run into a issue trying to get multiple checkboxes to work.

I am trying to calculate the cost of a product based on the options checked. However, my script is automatically assuming that all the boxes have been checked.

What is wrong with this code? Sorry if its a basic question but I have been banging my head for hours now.

function cal() {

    var selectionOne = 0;
    var selectionTwo = 0;
    var selectionThree = 0;
    var total = 0;


    if (document.getElementById("1").checked = true ){
        selectionOne = 25;
    }

    if (document.getElementById("2").checked = true ){
        selectionTwo = 50;
    }

    if (document.getElementById("3").checked = true ){
        selectionThree = 100;
    }

    total = selectionOne + selectionTwo + selectionThree;

    alert ("Your total is £" + total);

}

HTML

<html>
  <head>
    <title>Basic Pricing Script</title>
  </head>
  <body>
    <script src="script.js"></script>

    <p>Please select which options you want from the list</p>

    <form name="priceoptions">

      <input type="checkbox" id="1" name="big" value="big"> Big Prints<br>
      <input type="checkbox" id="2" name="medium" value="medium" > Medium Prints<br>
      <input type="checkbox" id="3" name="small" value="small"  > Small Prints<br>
      <input type="submit" id="button" value="Submit" onclick="cal()">

    </form>

  </body>
</html>

In an "if" statement, you need two equal symbols to compare for equality, not just one. document.getElementById("1").checked == true. — Tricky12
– Tricky12, Commented Jan 27, 2017 at 18:37
No need for the == true part. And all of this can be condensed. Check out my answer — Richard Hamilton
– Richard Hamilton, Commented Jan 27, 2017 at 18:48

Richard Hamilton · Accepted Answer · 2017-01-27 18:42:41Z

2

= is the assignment operator. For comparisons, you need to use == or ===.

==: This compares by type
=== This compares by type and value

Also, saying .checked == true is redundant. You can just use .checked. Furthermore, there is no reason to declare the variables, and then set their values on seperate lines. You can reduce the code by using the ternary operator.

Check out this snippet.

function cal() {
    var s1 = document.getElementById("1").checked ? 25 : 0;
    var s2 = document.getElementById("2").checked ? 50 : 0;
    var s3 = document.getElementById("3").checked ? 100 : 0;
    var total = s1 + s2 + s3;
    alert ("Your total is £" + total);
}

<p>Please select which options you want from the list</p>

<form name="priceoptions">
  <input type="checkbox" id="1" name="big" value="big"> Big Prints<br>
  <input type="checkbox" id="2" name="medium" value="medium" > Medium Prints<br>
  <input type="checkbox" id="3" name="small" value="small"  > Small Prints<br>
  <input type="submit" id="button" value="Submit" onclick="cal()">
</form>

edited Jan 27, 2017 at 18:42

answered Jan 27, 2017 at 18:39

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

3 Comments

random_user_name Over a year ago

What's the difference between using == and ===? :) (I know, but others may not)

user3246508 Over a year ago

Ok this is very interesting.How would you check if it was not checked? also i can set the variables value between checked and not checked by using : this looks so much nicer

user3246508 Over a year ago

developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Ju66ernaut · Accepted Answer · 2017-01-27 18:39:01Z

1

Your comparisons are not correct. A single "=" is not the correct way to compare values you need "==" for truthy and "===" for an exact match. Change it to

if (document.getElementById("1").checked == true ){
    selectionOne = 25;    
}

answered Jan 27, 2017 at 18:39

Ju66ernaut

2,7013 gold badges29 silver badges36 bronze badges

1 Comment

user3246508 Over a year ago

Ohh god i was being so silly not remembering this! Sorry for such a noob question! would it be any benifit going with === over == here ?

VitaliySt · Accepted Answer · 2017-01-27 18:38:53Z

0

If you need to compare two values in JavaScript you have to use == or === operators:

if (document.getElementById("1").checked == true ){

also you can simplify this if:

if (document.getElementById("1").checked){

answered Jan 27, 2017 at 18:38

VitaliySt

815 bronze badges

Collectives™ on Stack Overflow

How to check multiple checkboxes in Javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related