0
votes

Jquery obtient toutes les valeurs des cases à cocher cochées lors de la soumission du formulaire

Merci d'avance NINJAS. Ça me rend dingue. Je ne trouve pas comment faire une boucle et OBTENIR toutes les cases à cocher de ma soumission de formulaire. Il ne récupère qu'une seule valeur.

Jquery

                        <span class="et_pb">
                        <span class="field_options_title">Desired Price Range</span>

                        <input type="checkbox" id="price_range_12_0" class="input" value="Under $200,000" data-id="">
                        <label for="price_range_12_0"><i></i>Under $200,000</label>


                        <input type="checkbox" id="price_range_12_1" class="input" value="$200,000 - $300,000" data-id="">
                        <label for="price_range_12_1"><i></i>$200,000 - $300,000</label>


                        <input type="checkbox" id="price_range_12_2" class="input" value="$300,000 - $400,000" data-id="">
                        <label for="price_range_12_2"><i></i>$300,000 - $400,000</label>


                        <input type="checkbox" id="price_range_12_3" class="input" value="$400,000 - $500,000" data-id="">
                        <label for="price_range_12_3"><i></i>$400,000 - $500,000</label>

                        <input type="checkbox" id="price_range_12_4" class="input" value="$500,000+" data-id="">
                        <label for="price_range_12_4"><i></i>$500,000+</label>
                    </span>

HTML

    var price_range = jQuery(".et_pb input[type=checkbox]:checked").val();

jquery

0 commentaires

3 Réponses :

0
votes

Utilisez .each() pour obtenir toutes les valeurs

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="et_pb">
                        <span class="field_options_title">Desired Price Range</span>

                        <input type="checkbox" id="price_range_12_0" class="input" value="Under $200,000" data-id="">
                        <label for="price_range_12_0"><i></i>Under $200,000</label>


                        <input type="checkbox" id="price_range_12_1" class="input" value="$200,000 - $300,000" data-id="">
                        <label for="price_range_12_1"><i></i>$200,000 - $300,000</label>


                        <input type="checkbox" id="price_range_12_2" class="input" value="$300,000 - $400,000" data-id="">
                        <label for="price_range_12_2"><i></i>$300,000 - $400,000</label>


                        <input type="checkbox" id="price_range_12_3" class="input" value="$400,000 - $500,000" data-id="">
                        <label for="price_range_12_3"><i></i>$400,000 - $500,000</label>

                        <input type="checkbox" id="price_range_12_4" class="input" value="$500,000+" data-id="">
                        <label for="price_range_12_4"><i></i>$500,000+</label>
                    </span>

$(document).ready(function(){
var a=[];
$('input').change(function(){

$("input:checkbox:checked").each(function(){
    a.push($(this).val());
    console.log(a)
});
})



})

0 commentaires

1
votes

Si vous n'êtes intéressé que par les valeurs, vous pouvez utiliser jQuery.map () :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<span class="et_pb">
    <span class="field_options_title">Desired Price Range</span>
    <input type="checkbox" id="price_range_12_0" class="input" value="Under $200,000" data-id="" data-value="1" checked>
    <label for="price_range_12_0"><i></i>Under $200,000</label>


    <input type="checkbox" id="price_range_12_1" class="input" value="$200,000 - $300,000" data-value="2" data-id="">
    <label for="price_range_12_1"><i></i>$200,000 - $300,000</label>


    <input type="checkbox" id="price_range_12_2" class="input" value="$300,000 - $400,000" data-id="" data-value="3" checked>
    <label for="price_range_12_2"><i></i>$300,000 - $400,000</label>

    <input type="checkbox" id="price_range_12_3" class="input" value="$400,000 - $500,000" data-id="" data-value="4" checked>
    <label for="price_range_12_3"><i></i>$400,000 - $500,000</label>

    <input type="checkbox" id="price_range_12_4" class="input" value="$500,000+" data-value="5" data-id="">
    <label for="price_range_12_4"><i></i>$500,000+</label>
</span>

var price_range = jQuery(".et_pb input[type=checkbox]:checked").map(function(idx, ele) {
    return ele.value.indexOf('500') > -1 ? '4' : ele.value;
}).get();


console.log(price_range);

5 commentaires

J'ai essayé alert (price_range); mais il est venu vide ??

Cela fonctionne très bien! Quoi qu'il en soit pour changer la «valeur» lorsqu'elle est sélectionnée et soumise? Donc, si 500 000 $ ont été sélectionnés, pouvons-nous changer la valeur pour qu'elle soit égale à «4»?

Pouvez-vous fournir un exemple dans l'extrait ci-dessus?

Je devrais donc ajouter une "valeur de données" dans le formulaire?

Je ne peux pas faire ça. Le formulaire de contact de divi wordpress est limité.

0
votes

var hobbies= [];
        
$.each($("input[name='favlist']:checked"),function(){
    hobbies.push($(this).val());
});

alert(hobbies);

 <input type="checkbox" value="cricket" name="favlist">
 <input type="checkbox" value="tenis" name="favlist">

0 commentaires