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='' />
Related
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>
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>
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>
Friends, I am trying to learn how I can make a 'trivial' search input.. only the HTML without consulting the database.
I have a list of eight options, and would like to make a JS function to help me hide the options that don't match the search.
http://codepen.io/pen/
<div class="search__dropdown">
<div class="search__dropdown-header">
<h3 class="search__dropdown-title">Hostel</h3>
</div>
<div class="search__dropdown-body">
<input class="search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
<ul class="search__dropdown-list search__dropdown-list--hostel">
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
<label class="search__dropdown-label" for="hostel1">one</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
<label class="search__dropdown-label" for="hostel2">two</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
<label class="search__dropdown-label" for="hostel3">three</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
<label class="search__dropdown-label" for="hostel4">four</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
<label class="search__dropdown-label" for="hostel6">five</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
<label class="search__dropdown-label" for="hostel7">six</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
<label class="search__dropdown-label" for="hostel8">seven</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
<label class="search__dropdown-label" for="hostel9">eight</label>
</li>
</ul>
</div>
</div>
Attach the input event to trigger every letter change
Iterate through the list items and check if their text contains the current value
If not, hide the item
$('.search').on('input', function() {
var search = $(this).val();
var options = $('li:has([name*="hostel"])');
options.each(function() {
$(this).show();
if ($(this).find('[for*="hostel"]').text().indexOf(search) < 0) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="search__dropdown">
<div class="search__dropdown-header">
<h3 class="search__dropdown-title">Hostel</h3>
</div>
<div class="search__dropdown-body">
<input class="search search__dropdown-input search__dropdown-input--search" type="text" placeholder="Procure" />
<ul class="search__dropdown-list search__dropdown-list--hostel">
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel1" type="checkbox" id="hostel1" />
<label class="search__dropdown-label" for="hostel1">one</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel2" type="checkbox" id="hostel2" />
<label class="search__dropdown-label" for="hostel2">two</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel3" type="checkbox" id="hostel3" />
<label class="search__dropdown-label" for="hostel3">three</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel4" type="checkbox" id="hostel4" />
<label class="search__dropdown-label" for="hostel4">four</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel6" type="checkbox" id="hostel6" />
<label class="search__dropdown-label" for="hostel6">five</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel7" type="checkbox" id="hostel7" />
<label class="search__dropdown-label" for="hostel7">six</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel8" type="checkbox" id="hostel8" />
<label class="search__dropdown-label" for="hostel8">seven</label>
</li>
<li class="search__dropdown-item">
<input class="search__dropdown-checkbox" name="hostel9" type="checkbox" id="hostel9" />
<label class="search__dropdown-label" for="hostel9">eight</label>
</li>
</ul>
</div>
</div>
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>