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='' />

Sorting the dropdown labels generate by Bootstrap Table for columns keep open

We are using bootstrap table js library.
<script src="https://unpkg.com/bootstrap-table#1.15.3/dist/bootstrap-table.min.js"></script>
When we use:
data-show-columns="true"
we get the below dropdown list.
<ul class="dropdown-menu show" role="menu">
<li role="menuitem">
<label><input type="checkbox" data-field="thumbnailUrl" value="0" checked="checked">
<span>Thumbnail</span>
</label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="type" value="4" checked="checked"> <span>Recipe Type</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="rights" value="5" checked="checked"> <span>Rights</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="contributor" value="6" checked="checked">
<span>Contributor</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="rating" value="7" checked="checked"> <span>Rating</span></label>
</li>
<li role="menuitem">
<label><input type="checkbox" data-field="starRatings" value="8" checked="checked"> <span>Star</span></label>
</li>
</ul>
We need to sort this dropdown in alphabetic order along with checkbox state.

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>

Checking checkboxes in jquery validation

I have several rows of checkboxes. The scenario is that when I click a checkbox in the first row, and when I click another checkbox in the second or third row and within the same column, the previous checked checkbox is unchecked and the new one is checked. This is working fine. My issue is that when I uncheck the newly checked checkbox, it should re-check the previous checkbox checked. Anyone who can help me with this please ?
The demo is as per below.
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
$('.js-cars-item').each(function() { //Loop every js-cars-item
//Find the checkbox with the same index of clicked checkbox. Change disabled property
$(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false);
});
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-6>
<label for="car-1-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-6">
<label for="car-2-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-6">
<label for="car-3-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-6">
<label for="car-4-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-6">
<label for="car-5-6"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-7>
<label for="car-1-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-7">
<label for="car-2-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-7">
<label for="car-3-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-7">
<label for="car-4-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-7">
<label for="car-5-7"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-8">
<label for="car-1-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-8">
<label for="car-2-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-8">
<label for="car-3-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-8">
<label for="car-4-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-8">
<label for="car-5-8"><i class="icon-tick"></i></label>
</li>
</ul>
</div>

I have updated your javascript code, please try this:
$('.js-cars-item [type="checkbox"]').change(function() {
var idx = $(this).closest('li').index(); //Get the index - Number in order
var chk = $(this).is(":checked"); //Get if checked or not
var obj = this; //Checkbox object
if(chk)
{ //If it is checked
$('.previous_'+idx).removeClass('previous_'+idx); //Remove the 'previous_$index' class from the checkbox
$('.js-cars-item').find('li:eq(' + idx + ') [type="checkbox"]:checked').not(obj).addClass('previous_'+idx).prop("checked", false); //set the 'previous_$index' class to an existing checked checkbox and remove the checked property
}
else if($('.previous_'+idx).length)
{ //If the 'previous_$index' class is available while uncheck the current checkbox
$('.previous_'+idx).prop("checked", true).removeClass('previous_'+idx); //set the 'previous_$index' class's checkbox to checked and remove this class
$(obj).addClass('previous_'+idx); //set the 'previous_$index' class to the currently unchecked checkbox
}
var checkeds = [];
$(".cars-item input:checkbox:checked").each(function(index) {
checkeds[index] = $(this).attr('id');
});
console.clear();
console.log("These are checked:", checkeds);
})
.cars-item {
border-bottom: 1px solid gray;
}
ul {
/* Added to fully show console in snippet */
margin: 2px;
}
li {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-3">
<label for="car-1-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-3">
<label for="car-2-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-3">
<label for="car-3-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-3">
<label for="car-4-3"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-3">
<label for="car-5-3"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-4">
<label for="car-1-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-4">
<label for="car-2-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-4">
<label for="car-3-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-4">
<label for="car-4-4"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-4">
<label for="car-5-4"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-5">
<label for="car-1-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-5">
<label for="car-2-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-5">
<label for="car-3-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-5">
<label for="car-4-5"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-5">
<label for="car-5-5"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul> </
<li>
<input type="checkbox" id="car-1-6">
<label for="car-1-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-6">
<label for="car-2-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-6">
<label for="car-3-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-6">
<label for="car-4-6"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-6">
<label for="car-5-6"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-7">
<label for="car-1-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-7">
<label for="car-2-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-7">
<label for="car-3-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-7">
<label for="car-4-7"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-7">
<label for="car-5-7"><i class="icon-tick"></i></label>
</li>
</ul>
</div>
<div class="cars-item js-cars-item">
<ul>
<li>
<input type="checkbox" id="car-1-8">
<label for="car-1-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-2-8">
<label for="car-2-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-3-8">
<label for="car-3-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-4-8">
<label for="car-4-8"><i class="icon-tick"></i></label>
</li>
<li>
<input type="checkbox" id="car-5-8">
<label for="car-5-8"><i class="icon-tick"></i></label>
</li>
</ul>
</div>