Javascript 未填充所有选择框时，将运行警报

我有5个选择框需要选中。如果在单击“创建”按钮之前选择了其中的每一个。如果其中五个未填充，则单击事件不起作用

JAVASCRIPT

$(document).on("click", "#createButton", function () {

    if ($('option:selected', '#getSource').attr("typesource") == 1 ){
        console.log('test google');

        var checkDomain = $('#changeDomain').val() != "";
        var checkSource = $('#getSource').val() != "";
        var checkCountries = $('#getCountries').val() != "";
        var checkBundle = $('#getBundle').val() != "";
        var checkPool = $('#getPool').val() != "";

        if (checkDomain && checkSource && checkCountries && checkBundle && checkPool) {
            alert('button works');

            checkDomain = $('#changeDomain').val();
            checkSource = $('#getSource').val();
            checkCountries = $('#getCountries').val();
            checkBundle = $('#getBundle').val();
            checkPool = $('#getPool').val();

            console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool);
        }
    }
});

当最后两个复选框（checkBundle、checkPool）仍然为空且选中了checkDomain、Source和Countries选项时，警报将运行

HTML

<!--DOMAIN-->
                    <div class="col-md-2">
                        <div class="bulkFiltersDiv">
                            <p class="bulkFilters">DOMAIN</p>
                        </div>
                        <select id="changeDomain" class="form-control chosen-select" name="geoFilter[]">
                            <option value="">Select Domain</option>
                            <?php echo $selectboxDomains;?>
                        </select>
                    </div><!--end col-md-2-->
                    <!--SOURCE-->
                    <div class="col-md-2">
                        <div class="bulkFiltersDiv">
                            <p class="bulkFilters">SOURCE</p>
                        </div>
                        <select id="getSource" class="form-control chosen-select" name="geoFilter[]">
                        </select>
                    </div><!--end col-md-2-->
                    <!--COUNTRY-->
                    <div class="col-md-2">
                        <div class="bulkFiltersDiv">
                            <p class="bulkFilters">COUNTRY</p>
                        </div>
                        <select id="getCountries" class="form-control chosen-select" name="geoFilter[]">
                        </select>
                    </div><!--end col-md-2-->
                    <!--BUNDLE-->
                    <div class="col-md-2">
                        <div class="bulkFiltersDiv">
                            <p class="bulkFilters">BUNDLE</p>
                        </div>
                        <select id="getBundle" class="form-control chosen-select" id="source" name="geoFilter[]">
                        </select>
                    </div><!--end col-md-2-->
                    <!--POOL-->
                    <div class="col-md-2">
                        <div class="bulkFiltersDiv">
                            <p class="bulkFilters">POOL</p>
                        </div>
                        <select id="getPool" class="form-control chosen-select" id="source" name="geoFilter[]">
                        </select>
                    </div><!--end col-md-2-->

域
选择域
来源
国家/地区
捆绑
池

如果你们对改进我的代码也有任何建议，我将不胜感激！谢谢

$('#createButton').on("click", function () {

if ($('option:selected', '#getSource').attr("typesource") == 1 ){
    console.log('test google');

    var checkDomain;
    var checkSource;
    var checkCountries;
    var checkBundle;
    var checkPool;
    var err=0;
    $('.chosen-select').each(function(){
       if($(this).val()==""){
          err++;
       }
   });
   if(err===0){
        alert('button works');
        checkDomain = $('#changeDomain').val();
        checkSource = $('#getSource').val();
        checkCountries = $('#getCountries').val();
        checkBundle = $('#getBundle').val();
        checkPool = $('#getPool').val();

        console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool);
    }
    else{

    }
}
}

1.使用jquery.each（）函数检查是否选中了每个复选框 2.如果没有值，则递增

err

。 3.如果

err==0

继续

如果您设置了一个正确的点击事件，那么您的代码将正常工作，请检查下面的示例

希望这有帮助

$（文档）。在（“单击”、“#创建按钮”上，函数（）{
if（$（'option:selected'，'#getSource'）.attr（“typesource”）==1）{
log（'testgoogle'）；
var checkDomain=$（'#changeddomain'）.val（）！=“”；
var checkSource=$（'#getSource'）.val（）！=“”；
var checkCountries=$（'#getCountries'）.val（）；
var checkBundle=$（'#getBundle'）.val（）；
var checkPool=$（'#getPool'）.val（）；
if（checkDomain&&checkSource&&checkCountries&&checkBundle&&checkPool）{
警报（“按钮工作”）；
checkDomain=$（'#changeDomain'）.val（）；
checkSource=$（'#getSource'）.val（）；
checkCountries=$（'#getCountries'）.val（）；
checkBundle=$（'#getBundle'）.val（）；
checkPool=$（'#getPool'）.val（）；
日志（checkDomain、checkSource、checkCountries、checkBundle、checkPool）；
}
}
});

提交
域
选择域
1.
2.
来源
选择源
1.
2.
国家/地区
选择国家
1.
2.
捆绑
选择捆绑
1.
2.
池
选择池
1.
2.






share html alsookay现在你有了html，你的代码工作得很好：对我来说，它不完全工作，我不明白为什么。我通过逐个选择selectbox并单击next按钮来测试代码。当我到达国家/地区选择时，我准备的警报将运行。：/但这里有工作，我不知道为什么！：（请您解释一下您的答案，好吗？为什么要使用此解决方案？它将迭代您选择的元素，如果未选择任何内容，它将增加
err
。这不是您想要的吗？@Timmywell，是的。我要求更好地理解您的解决方案。顺便说一句，我有一个错误：
未捕获的TypeError:无法读取null的属性“trim”。）我的错误，你不需要
trim（）
试试我编辑的代码，我会添加解释，很抱歉给你带来不便@TimmyThe按钮只能在选择一个输入时工作，这不是我假装的。：/对不起，我指的是我的JS代码。它现在已经更新了。我忘了向你显示我的单击事件以便你正确检查：）你能检查一下吗？我已经用你的点击事件代码更新了我的答案，效果很好。。您可以看到，在所有选择都为空之前，警报不会运行，我认为问题来自这些选择的默认值（请检查这一点）。