Danielle Teychenne Danielle Teychenne - 1 month ago 12
jQuery Question

Multiples checkboxes same .click function

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

The .getElementById() function takes a single ID as an argument and returns the (first) element with that ID (or null if none are found). You can't call it with a list of IDs.

Giving the elements a common class is the neatest way to identify them, but the .checked property belongs to individual checkboxes, so you can't use it on the results of .getElementsByClassName("group1") (which returns a list).

You said in a comment you are trying to test if at least one item is checked. jQuery's .is() method will:

Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

So if you use that together with the :checked selector you can test if any elements with the group1 class are checked:

$('.group1').click(function(){ 
    if ($('.group1').is(':checked')) {
      job1 += 1;
      // etc.
    } else { // none are checked:
      job1 -= 1;
      // etc.
    }
});

Note that if both your if and else branches update exactly the same set of variables and the only difference is whether to add or subtract 1 then you can do something like this:

$('.group1').click(function(){ 
  var val = $('.group1').is(':checked') ? 1 : -1;
  job1 += val; 
  job2 += val;
  job3 += val;
  job4 += val;
  job5 += val;
  job6 += val;
  job7 += val;
  job8 += val;
  workSkillsCheckboxCount += val;
  console.log(workSkillsCheckboxCount);   
});