We Keep Coding

Checkbox not activating in If/Else function

I'm cobbling together pieces of a D&D character sheet in HTML and Javascript to practice what I'm learning and I'm having a little trouble with a checkbox on it. I've built a list of "Skills" that, when checked, are supposed to add in an additional bonus. I have it in an If/Else statement that at least is working enough to show the "Else" value, but once the checkbox is clicked nothing changes. So it seems the issue is in how I've set up the checkbox in the "If" statement. I'm still a beginner so I'm sure it's something obvious I've missed. Any help is appreciated!
const abilityBonus = {
strBonus: 3,
dexBonus: 4,
conBonus: 1,
intBonus: 3,
wisBonus: 2,
chaBonus: 2,
profBonus: 3,
};
// Test If/Else for checkbox to add Proficiency bonus, id as an arugement
function skillBonusTwo(ability, elementID) {
const checkBox = document.getElementsByClassName('skill-box');
const skillAbility = abilityBonus[ability];
const totalBonus = skillAbility + abilityBonus.profBonus;
if (checkBox.checked == true) {
document.getElementById(elementID).value = totalBonus;
} else {
document.getElementById(elementID).value = skillAbility;
}
}
skillBonusTwo('chaBonus', 'deception');
skillBonusTwo('chaBonus', 'intimidation');
skillBonusTwo('dexBonus', 'acrobatics');
skillBonusTwo('strBonus', 'athletics');
<div id="skills">
<ul id="skill-list">
<lh>Skills</lh>
<li>
<label><input class="skill-box" id="acro-box" type="checkbox" />Acrobatics </label><input id="acrobatics" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Animal Handling</label><input id="animal-handling" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Arcana</label><input id="arcana" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Athletics</label><input id="athletics" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" id="deception-box" type="checkbox" />Deception</label><input id="deception" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />History</label><input id="history" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Insight</label><input id="insight" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Intimidation</label><input id="intimidation" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Investigation</label><input id="investigation" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Medicine</label><input id="medicine" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Nature</label><input id="nature" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Perception</label><input id="perception" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Performance</label><input id="performance" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Persuasion</label><input id="persuasion" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Religion</label><input id="religion" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Sleight of Hand</label><input id="sleight-of-hand" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Stealth</label><input id="stealth" class="bonus-box" type="text" readonly="true"/>
</li>
<li>
<label><input class="skill-box" type="checkbox" />Survival</label><input id="survival" class="bonus-box" type="text" readonly="true"/>
</li>
</ul>
</div>

select checkbox on input textbox by jquery

This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle

You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />

jQuery if each input value inside each li == 0

I'm trying to solve this issue. I have multiple inputs and I would like to compare if everyone has value == 0 and is also checked.
I don't know how to do it - I spend almost day searching and finding a way how to do it and don't have clue how to go further. I tried to find if one input is checked and has that value.
Thank U for Your help.
$(document).on('change','select, input', function() {
console.log('input/select has been changed');
var $this = $(this);
var $inputValue = $this.val();
console.log('input Value is ' + $inputValue);
if ($inputValue == 0 && $this.is(':checked')) {
console.log('One input is checked and has 0 value');
}
if ('all first inputs are checked and has 0 value') {
console.warn('Could U help me?');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>

I'm not completely sure what you want, but I think this can help you
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var inputs = $('input');
var inputsWithValZero = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0);
});
var inputsWithValZeroAndChecked = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0 && $(elm).is(':checked'));
});
if ($(inputsWithValZero).length == inputsWithValZeroAndChecked.length){
console.log('all checked inputs checked has 0 value');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>

<script>
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var count = 0;
$('input').each(function ( index,value) {
console.log(value);
console.log(index);
if ($(value).val() == 0 && $(value).is(':checked')) {
count = count + 1;
console.log(count+' input is checked and has 0 value');
}
});
console.log($('input').length);
if ($('ul').length == count)
console.log('all first inputs are checked and has 0 value')
}
</script>

Having Issue on Targeting Input with Complex Name [duplicate]

This question already has answers here:
Escape square brackets when assigning a class name to an element
(4 answers)
Closed 5 years ago.
I have a set of checkboxes like this
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
generated by WordPress API now I need to select the chech box by it's name attribute like following but I am getting this error
Syntax error, unrecognized expression:
input:checkbox[name=tax_input[apptax][]]
can you please let me know how to fix this
$('input:radio[name=r3]').on('change', function() {
$('input:checkbox[name=tax_input[apptax][]]').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>

You need to escape the brackets like this:
$('input:checkbox[name=tax_input\\[apptax\\]\\[\\]]').removeAttr('checked');
See working jsfiddle:
https://jsfiddle.net/8hw051vu/

You can just enclosed the name by "" like $('input:checkbox[name="tax_input[apptax][]"]')
$(document).ready(function(){
$('input:checkbox[name="tax_input[apptax][]"]').removeAttr('checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15" checked/> No

Some characters simply won't work well on css selectors. If you can't avoid using them, then use an id if it's an unique element or create a class if they are expected to be many.
If you are in a hurry use #Ingal S. solution

Select the checkbox by the value of radio button to value of checkbox.
$('input:radio[name=r3]').on('change', function() {
var value = $(this).val()
$('input:checkbox[value='+value+']').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>

check all function with outputting labels into a div

i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>

I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements

Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful