如何建立以验证 html 中的至少一个输入字段?

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来执行点击"执行"，它控制在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>