I'm trying to get the multiple value of my checkbox with the jQuery but with my code I got double value.
If I pick Apple and Manggo and when I submit the form I get value of Apple Apple Manggo.
A lot of tutorial use .click function. Since I have more function I want to use it outside the const submit =() =>{}
How do I fix this multiple value ?
let fruit_temp = [];
$('input[name="chk_fruit"]').change(function() {
$('input[name="chk_fruit"]:checked').each(function() {
fruit_temp.push($(this).val());
});
});
const submit = () => {
let formData = new FormData();
//more formData
formData.append('Fruit', fruit_temp);
for (var pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 mb-30">
<label><b>Favourite Fruit</b></label><br>
<div class="form-group">
<ul>
<li><input type="checkbox" name="chk_fruit" value="Apple"> Apple</li>
<li><input type="checkbox" name="chk_fruit" value="Manggo"> Manggo</li>
<li><input type="checkbox" name="chk_fruit" value="Honeydew"> Honeydew</li>
<li><input type="checkbox" name="chk_fruit" value="Orange"> Orange</li>
</ul>
<!-- more form field -->
<button onclick="submit()">Submit</button>
</div>
</div>let fruit_temp = [];
$('input[name="chk_fruit"]').change(function() {
fruit_temp = []; // reset your variable before adding another checked items
$('input[name="chk_fruit"]:checked').each(function() {
fruit_temp.push($(this).val());
});
});
Simply reset your variable before adding latest checked items into your array. fruit_temp = []; on your change event will do the work.
When you loop through using .each, you are grabbing all of the values that are currently selected and pushing them into the fruit_temp array. However, you are not resetting the value of fruit_temp, so you are pushing more and more with each checkbox. All you you need to do is clear the array with each change:
let fruit_temp = [];
$('input[name="chk_fruit"]').change(function() {
fruit_temp = [];
$('input[name="chk_fruit"]:checked').each(function() {
fruit_temp.push($(this).val());
});
});