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);
}
});
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);
});
这是一个简单的解决方案：
$(".check").on("click", function() {
if ($(this).is(':checked')) {
// do your checked activity here
// if your further want to know which checkbox was checked recently then $(this).attr('name') will be handy
console.log("Checkbox "+$(this).attr('name')+" checked: true");
} else {
// do your unchecked activity here
// if your further want to know which checkbox was unchecked recently then $(this).attr('name') will be handy
console.log("Checkbox "+$(this).attr('name')+" checked: false");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="check" name="c1" type="checkbox" />
<input class="check" name="c2" type="checkbox" />
<input class="check" name="c3" type="checkbox" />
<input class="check" name="c4" type="checkbox" />
<input class="check" name="c5" type="checkbox" />
<input class="check" name="c6" type="checkbox" />下一篇: 倍数复选框相同.click功能