Jquery 获取表单提交中所有选中的复选框值

Question

提前感谢忍者。这让我发疯了。我找不到如何从我的表单提交中循环浏览和获取所有选中的复选框。它只检索一个值。

Jquery

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

.HTML

                        <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>

Answer 1

如果你只对值感兴趣，你可以使用 jQuery.map（）：

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);

<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>

Answer 2

使用 .each() 获取所有值

$(document).ready(function(){
var a=[];
$('input').change(function(){
$("input:checkbox:checked").each(function(){
    a.push($(this).val());
    console.log(a)
});
})
})

<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>

Answer 3

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">