时间戳

首页 > 解决方案 > 如何通过jQuery中的循环选择至少3个复选框

javascript - 如何通过jQuery中的循环选择至少3个复选框

问题描述

我想允许至少 3 个复选框进行检查，我尝试了下面的代码，但效果不佳。

HTML ...

<div class="ywapo_options_container">
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
</div>

jQuery

jQuery(document).ready(function(){
        var parent =jQuery(document).find('#yith_wapo_groups_container').find('.ywapo_options_container');
        
        jQuery(parent).children().each(function(){
            if (jQuery(parent).children().length <=2 ) {
                //console.log("plaeae select at lest 3")
             }
        }); 
         
    });

有人请帮助我，我怎样才能选择至少 2 个复选框？

标签： javascripthtmljquery

解决方案

要确定检查了多少个复选框，只需获取:checked实例的长度（我检查了以下其中一项，以便您可以看到非零的内容）

console.log($('.ywapo_input_checkbox:checked').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ywapo_options_container">
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed" checked>
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
</div>

如果您希望每次选中/取消选中其中一个复选框时都运行它，您需要一个事件处理程序

$('.ywapo_options_container').on("change",".ywapo_input_checkbox", function(){
    console.log($('.ywapo_input_checkbox:checked').length);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ywapo_options_container">
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed" checked>
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
    <div class="ywapo_input_container ywapo_input_container_checkbox">
        <input  placeholder="" data-typeid="48" data-price="0" data-pricetype="fixed" data-index="0" type="checkbox" name="ywapo_checkbox_48[0]" value="ywapo_value_48" class="ywapo_input ywapo_input_checkbox ywapo_price_fixed">
    </div>
</div>

推荐阅读