Estoy tratando de obtener el valor múltiple de mi casilla de verificación con jQuery pero con mi código obtuve el doble de valor.
Si elijo Apple y Manggo y cuando envío el formulario, obtengo el valor de Apple Apple Manggo .
Muchos tutoriales usan la función .click . Como tengo más funciones, quiero usarlas fuera del const submit =() =>{}
¿Cómo soluciono este valor múltiple?
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()); }); }); Simplemente restablezca su variable antes de agregar los últimos elementos marcados a su matriz. fruit_temp = []; en su evento de change hará el trabajo.
Cuando recorre el ciclo usando .each , está tomando todos los valores que están actualmente seleccionados y empujándolos a la matriz fruit_temp . Sin embargo, no está restableciendo el valor de fruit_temp , por lo que está presionando más y más con cada casilla de verificación. Todo lo que necesita hacer es borrar la matriz con cada cambio:
let fruit_temp = []; $('input[name="chk_fruit"]').change(function() { fruit_temp = []; $('input[name="chk_fruit"]:checked').each(function() { fruit_temp.push($(this).val()); }); });