Multiples checkboxes, same .click function

Question

Apologies for my lack of knowledge, I'm sure this is one of those simple fix solutions.

I have a number of checkboxes in my web page. When you check a check box a value of 1 is sent to a variable.

See example:

  $('#abilitytobenonjudgemental').click(function(){ 
   var check = document.getElementById("abilitytobenonjudgemental").checked
    if (check == true) {
    job2 += 1;
    job3 += 1;
    job7 += 1;
    workSkillsCheckboxCount += 1;  
    console.log(workSkillsCheckboxCount);   
   }
    else if (check == false) {
    job2 -= 1;
    job3 -= 1;
    job7 -= 1;
    workSkillsCheckboxCount -= 1; 
    console.log(workSkillsCheckboxCount);

  }
   });

A number of the checkboxes' functions double up and I would like to write a big function, rather than a number of functions. This function below doesn't seem to work.

   $('#teamwork, #goodcommunicator, #self-motivated, #computerskills, #planning, #selfmanagement, #flexibleteamplayer, #timedeadlines').click(function()     { 
       var check = document.getElementById("teamwork, goodcommunicator,      planning, self-motivated, computerskills, selfmanagement, flexibleteamplayer, timedealines").checked
     if (check == true) {
     job1 += 1; 
     job2 += 1;
     job3 += 1;
     job4 += 1;
     job5 += 1;
     job6 += 1;
     job7 += 1;
     job8 += 1;
     workSkillsCheckboxCount += 1; 
     console.log(workSkillsCheckboxCount);
 }
    else if (check == false) {
     job1 -= 1; 
     job2 -= 1;
     job3 -= 1;
     job4 -= 1;
     job5 -= 1;
     job6 -= 1;
     job7 -= 1;
     job8 -= 1;
     workSkillsCheckboxCount -= 1; 
     console.log(workSkillsCheckboxCount);

 }
 });

I tried giving the appropriate checkboxes a class and then wrote this function. But that doesn't seem to be sending the values to the workSkillsCheckboxCount variable.

  $('.group1').click(function(){ 
        var check = document.getElementsByClassName("group1").checked
    if (check == true) {
    job1 += 1; 
    job2 += 1;
    job3 += 1;
    job4 += 1;
    job5 += 1;
    job6 += 1;
    job7 += 1;
    job8 += 1;
    workSkillsCheckboxCount += 1; 
    console.log(workSkillsCheckboxCount);
}
    else if (check == false) {
    job1 -= 1; 
    job2 -= 1;
    job3 -= 1;
    job4 -= 1;
    job5 -= 1;
    job6 -= 1;
    job7 -= 1;
    job8 -= 1;
    workSkillsCheckboxCount -= 1; 
    console.log(workSkillsCheckboxCount);

}
})

Answer 1 · 2016-10-31T07:44:16Z

October 31, 2016 7:44am

A kind soul on Stack overflow has explained this and offered a solution http://stackoverflow.com/questions/40335924/multiples-checkboxes-same-click-function '''html $('.group1').click(function(){ if ($('.group1').is(':checked')) { job1 += 1; // etc. } else { // none are checked: job1 -= 1; // etc. } }); '''

Answer 2 · 2016-10-31T05:32:55Z

October 31, 2016 5:32am

Maybe you can make a button that processes the checkboxes on click. Just an example below.

function processCheckBoxes(){
       var myForm = document.forms[0];
       var i;

       for (i = 0; i < myForm.length; i++){
              if(myForm[i].checked){
                     jobs1 += 1;
              } else {
                     jobs1 -= 1;
              }
        }
}

<button onclick="processCheckBoxes()" value="Process" />

Welcome to the Treehouse Community

Looking to learn something new?

Danielle Teychenne

Danielle Teychenne

Multiples checkboxes, same .click function

2 Answers

Danielle Teychenne

Danielle Teychenne

David Mendiola

David Mendiola