Question

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

如果你们有任何改进我的代码的技巧，我很感激！谢谢！

Answer 1

$('#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继续

Answer 2

<强> Working fiddle

如果您设置了正确的点击事件，您的代码将正常运行，请查看以下示例。

希望这有帮助。

$(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);
        }
    }
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="col-md-2">
<button class="btn btn-primary" id="createButton">Submit</button>
</div><!--end col-md-2-->

<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>
    <option value="1">1</option>
    <option value="2">2</option>
  </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[]">
    <option value="">Select SOURCE</option>
    <option value="1" typesource='1'>1</option>
    <option value="2">2</option>
  </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[]">
    <option value="">Select COUNTRY</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </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[]">
    <option value="">Select BUNDLE</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </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[]">
    <option value="">Select POOL</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div><!--end col-md-2-->
<br><br><br><br><br><br>

未填写所有选择框时运行警报

2 个答案: