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>
Related
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='' />
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>
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>
HTML code:
<ul class="expander-list" id="category">
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" id="all" name="filter" class="checkbox0" value="all">
all </label>
</div>
</li>
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" name="filter" class="checkbox1" value="electronics">
Electronics </label>
</div>
</li>
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" name="filter" class="checkbox1" value="kitchen">
Kitchen </label>
</div>
</li>
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" name="filter" class="checkbox1" value="decoratives">
Decoratives / Interior </label>
</div>
</li>
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" name="filter" class="checkbox1" value="homedecor">
Home Decor </label>
</div>
</li>
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" name="filter" class="checkbox1" value="furnitures">
Furnitures </label>
</div>
</li>
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" name="filter" class="checkbox1" value="toys">
Toys </label>
</div>
</li>
<li>
<div class="radio" style="padding-left:0px">
<label>
<input type="checkbox" name="filter" class="checkbox1" value="vehicles">
Vehicles </label>
</div>
</li>
</ul>
jQuery code:
$('input[type="checkbox"]').change(function(){
startexecution:
alert('checkbox is changed');
var number = [];
$('input[type="checkbox"]:checked').each(function(){
number.push($(this).val());
});
if(number.length == 0){
alert('now it zero');
$('.checkbox1').prop('checked', this.checked);
$('.checkbox0').prop('checked', this.checked);
}
});
The following line is not working
$('.checkbox1').prop('checked', this.checked);
$('.checkbox0').prop('checked', this.checked);
if the size of an array number is 0 then it alerting 'now it zero' but the line of prop function is not working right now I am helpless so please help me for resolving this error.
In your code, this.checked refers to the state of the box you've clicked -- the one that fired the change() event. So this.checked will be true if you checked a checkbox and false if you unchecked a checkbox. Here's a demonstration:
$('input[type="checkbox"]').change(function() {
console.log(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="expander-list" id="category">
<li><label><input type="checkbox" id="all" name="filter" class="checkbox0" value="all">all</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="electronics">Electronics</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="kitchen">Kitchen</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="decoratives">Decoratives / Interior</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="homedecor">Home Decor</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="furnitures">Furnitures</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="toys">Toys</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="vehicles">Vehicles</label></li>
</ul>
If you want to check all the checkboxes, set the checked property to true rather than to the state of the changed box. Below, if your click results in zero boxes checked, all boxes will become checked.
$('input[type="checkbox"]').change(function() {
if ($('input[type="checkbox"]:checked').length == 0) {
$('.checkbox1,.checkbox0').prop('checked', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="expander-list" id="category">
<li><label><input type="checkbox" id="all" name="filter" class="checkbox0" value="all">all</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="electronics">Electronics</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="kitchen">Kitchen</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="decoratives">Decoratives / Interior</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="homedecor">Home Decor</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="furnitures">Furnitures</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="toys">Toys</label></li>
<li><label><input type="checkbox" name="filter" class="checkbox1" value="vehicles">Vehicles</label></li>
</ul>
I have a few checkboxes with the name="location[]" and each checkbox has a different value value="3" or value="5" etc. I am wondering how in jquery when these boxes are checked to put the value inside an array called location[] ? Here is my html:
<ul id="searchFilter">
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="1">Toronto</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="3">New York</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="6">London</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="5">Paris</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="4">Berlin</li>
</ul>
and heres what I got as far a jquery:
var $checkboxes = $("input:checkbox");
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.name);
}
this returns just location[] and adds another location[] when I check another item.
Please help.
I also have other checkboxes with price[], sqft[]...I am looking to keep the checkboxes in the same ground, so arrays inside 1 array...i hope that makes sense.
You can use the :checked selector and map() to create an array from a set of matched elements. Try this:
$(':checkbox').change(e => {
let opts = $(":checkbox:checked").map((i, el) => el.value).get();
console.log(opts);
});
/* alternative for IE support:
$(':checkbox').change(function() {
var opts = $(":checkbox:checked").map(function() {
return this.value;
}).get();
console.log(opts);
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="1">
Toronto
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="3">
New York
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="6">
London
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="5">
Paris
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="4">
Berlin
</li>
</ul>
I have multiple checkboxes, location[], price[], sqft[] - how could I keep them in separate arrays but still inside the opts?
To do that you need to restrict the map() to the current ul element by using closest():
$(':checkbox').change(function() {
let opts = $(this).closest('ul').find(":checkbox:checked").map((i, el) => el.value).get();
console.log(opts);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="1">
Toronto
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="3">
New York
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="6">
London
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="5">
Paris
</li>
<li class="">
<input type="checkbox" name="location[]" class="cb_location" value="4">
Berlin
</li>
</ul>
<ul id="searchFilter">
<li>
<input type="checkbox" name="price[]" class="cb_price" value="2">
$200,000 to $299,999
</li>
<li>
<input type="checkbox" name="price[]" class="cb_price" value="3">
$300,000 to $399,999
</li>
<li>
<input type="checkbox" name="price[]" class="cb_price" value="4">
$400,000 to $499,999
</li>
<li>
<input type="checkbox" name="price[]" class="cb_price" value="5">
$500,000+
</li>
</ul>