Optimizing js -Saving values from checkboxes in object

Question

i'm rather new to js and i'd like to optimize my code. I have a group of checkboxes and their boolean values are saved in an object for further calculations.

HTML:

<fieldset>
    <input type="checkbox" id="checkbox1" onchange="checkbox1Changed()" value="checkbox1">

    <input type="checkbox" id="checkbox2" onchange="checkbox2Changed()" value="checkbox2">

    <input type="checkbox" id="checkbox3" onchange="checkbox3Changed()" value="checkbox3">
</fieldset>

JS:

//store values for further computation

var boxValues = {
    box1: false,
    box2: false,
    box3: false,
}

//get checkboxvalues from view

var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");

//update values in boxValues

function checkbox1Changed() {
    if (checkbox1.checked) {
        boxValues.box1 = true;
    } else {
        boxValues.box1 = false;
    }
}

function checkbox2Changed() {
    if (checkbox2.checked) {
        boxValues.box2 = true;
    } else {
        boxValues.box2 = false;
    }
}

function checkbox3Changed() {
    if (checkbox3.checked) {
        boxValues.box3 = true;
    } else {
        boxValues.box3 = false;
    }
}

Since i plan on having approximately 20 checkboxes in the view there would be a lot of repeating code. Does anyone know a smarter way to do that?

Thanks in advance!

Vin

Are you actually using jquery or did you add that tag by accident/habit? If you aren't using it you don't need to add it just for this code, but you might want to remove the tag so you don't get answers that assume you already use jQuery. — Ward D.S.
– Ward D.S., Commented Aug 4, 2015 at 8:17

Tushar · Accepted Answer · 2015-08-04 08:21:13Z

1

Add common class to all the checkboxes
Create an object for the values of all checkboxes
Bind event handler on the checkboxes using the common class
Update the status of clicked checkbox in event handler

Also, it is good practice to bind events in javascript instead of inline in the HTML.

var myObj = {
  checkbox1: false,
  checkbox2: false,
  checkbox3: false
};
$('.myCheckbox').on('change', function() {
  var thisId = $(this).attr('id');

  myObj[thisId] = this.checked;

  console.log(myObj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<fieldset>
  <input type="checkbox" id="checkbox1" value="checkbox1" class="myCheckbox">

  <input type="checkbox" id="checkbox2" value="checkbox2" class="myCheckbox">

  <input type="checkbox" id="checkbox3" value="checkbox3" class="myCheckbox">
</fieldset>

edited Aug 4, 2015 at 8:21

answered Aug 4, 2015 at 8:15

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

2 Comments

Vin Banton Over a year ago

thanks, it works! what do i need the field "value" for in this solution? Or can i remove it since "id" is used?

Tushar Over a year ago

@VinBanton To get the value, you can use $(this).val() in the event handler

Ward D.S. · Accepted Answer · 2015-08-04 08:15:21Z

1

You can bind the same function to every checkbox, and use the id of the checkbox as the key in your object:

function onCheckBoxChanged(e){
  var sender = e.target;
  boxValues[sender.id] = (sender.checked);
}

Playing around with this should save you a lot of typing :)

answered Aug 4, 2015 at 8:15

Ward D.S.

5583 silver badges11 bronze badges

Collectives™ on Stack Overflow

Optimizing js -Saving values from checkboxes in object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related