Question

我有以下html代码：

<label class="checkbox-inline">
<input type="checkbox" name="field_1" value="field_1"    id="field_1"/> Field 1  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_2" value="field_2"    id="field_2"/> Field 2  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_3" value="field_3"    id="field_3"/> Field 3  </label>

<button class="btn btn-primary" type="submit" onclick="getFormData('action')">   Execute <i class="fa fa-arrow-right"></i> </button>

我需要一个函数JS来执行onclick“ Execute”，它控制在getFormData（'action'）之前检查至少1个字段

Answer 1

如果您使用的是jQuery，则应该可以使用。

if($('#field_1').is(':checked') || $('#field_2').is(':checked') || $('#field_3').is(':checked')) {
    // Do something
} else {
    return;
}

或者使用普通JavaScript

let field1 = document.getElementById("field_1").checked;
let field2 = document.getElementById("field_2").checked;
let field3 = document.getElementById("field_3").checked;

if(field1 || field2 || field3) {
    // Do something
} else {
    return; 
}

Answer 2

function getFormData(action){
var oneChecked=false;
  $('input[type=checkbox]').each(function () {
      if($(this).is(':checked')){
        oneChecked=true;
      }
  });
  if(oneChecked){
    console.log("At least one checked");
  }
  else{
    console.log("No one checked");
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
<input type="checkbox" name="field_1" value="field_1"    id="field_1"/> Field 1  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_2" value="field_2"    id="field_2"/> Field 2  </label>

<label class="checkbox-inline">
<input type="checkbox" name="field_3" value="field_3"    id="field_3"/> Field 3  </label>

<button class="btn btn-primary" type="submit" onclick="getFormData('action')">   Execute <i class="fa fa-arrow-right"></i> </button>

Answer 3

您可以使用preventDefault()和一个数组来包含输入的状态。然后扩展提交时触发的函数，以检查状态数组是否包含任何真实值。如果是，请提交。

function getFormData(action, event) {
  var checked = [];
  var checkboxes = document.querySelectorAll('input[type="checkbox"');

  for (var i = 0; i < checkboxes.length; i++) {
    checked.push(checkboxes[i].checked);
  }

  if (!checked.includes(true)) {
    event.preventDefault();
  }
}

<form>
  <label class="checkbox-inline">
<input type="checkbox" name="field_1" value="field_1"    id="field_1"/> Field 1  </label>

  <label class="checkbox-inline">
<input type="checkbox" name="field_2" value="field_2"    id="field_2"/> Field 2  </label>

  <label class="checkbox-inline">
<input type="checkbox" name="field_3" value="field_3"    id="field_3"/> Field 3  </label>

  <button class="btn btn-primary" type="submit" onclick="getFormData('action', event)">   Execute <i class="fa fa-arrow-right"></i> </button>
</form>

如何建立验证html中至少一个输入字段的方法？

3 个答案: