使用JQuery验证RadioBoxes的更好方法

Question

我的网页上有几个单选按钮组，这就是我决定验证组的原因

function validateAppRXForm() {
if($('input[name="creativity"]:checked').length == 0 ||
$('input[name="intelligence"]:checked').length == 0 ||
$('input[name="initiative"]:checked').length == 0 ||
$('input[name="motivation"]:checked').length == 0 ||
$('input[name="development"]:checked').length == 0 ||
$('input[name="vision"]:checked').length == 0 ||
$('input[name="Integrity"]:checked').length == 0 ||
$('input[name="Confidentiality"]:checked').length == 0 ||
$('input[name="Interpersonal"]:checked').length == 0 ||
$('input[name="speed"]:checked').length == 0 ||
$('input[name="accuracy"]:checked').length == 0 ||
$('input[name="ability"]:checked').length == 0 ||
$('input[name="assessmnt"]:checked').length == 0 ||
$('input[name="errors"]:checked').length == 0){
alert('some fields were left blank..');
// alert('some fields were left blank...');
return false;
}
}

但我觉得还有一种更好的方法可以让我从数组中传递名称。。所以我决定使用单选按钮的名称

//create the array by splitting string names.... 
let arr = String('creativity;intelligence;initiative;motivation;development;vision;Integrity;Confidentiality;Interpersonal;speed;$accuracy;ability;assessmnt;errors').split(';');
//loop through and validate...
function validateAppRXForm() {
arr.forEach(name => {
if($('input[name=`${name}`"]:checked').length == 0){
alert('some fields were left blank..');
return false;
}
});
}

但它不起作用。。。

Answer 1

您可以将Array#every()与is(':checked')一起使用，作为比检查长度更短的写入方式

//create the array by splitting string names.... 
let arr = 'creativity;intelligence;initiative'.split(';');
function isValid(){
return arr.every(name => $(`input[name='${name}']`).is(':checked'))
}
console.log('On load:', isValid())
// check one of each
arr.forEach(name => $(`input[name='${name}']`).first().prop('checked', true))
console.log('After checked:', isValid())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Creativity:
<label><input type="radio" name="creativity" value="yes" />Yes</label>
<label><input type="radio" name="creativity" value="no" />No</label>
<br/> Intelligence:
<label><input type="radio" name="intelligence" value="yes" />Yes</label>
<label><input type="radio" name="intelligence" value="no" />No</label>
<br/> Initiative:
<label><input type="radio" name="initiative" value="yes" />Yes</label>
<label><input type="radio" name="initiative" value="no" />No</label>
<br/>
<input type="submit" />
</form>

Answer 2

像这样，尽管我建议不要使用未检查的无线电，但如果您想测试无/a/b选择，请选择

//create the array by splitting string names.... 
let arr = 'creativity;intelligence;initiative'.split(';');
$(function() {
$("form").on("submit", function(e) {
if (arr.filter(item => $(`input[name=${item}]:checked`).length === 0).length > 0) {
console.log("some rads not checked");
e.preventDefault();
}
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Creativity:
<label><input type="radio" name="creativity" value="yes" />Yes</label>
<label><input type="radio" name="creativity" value="no" />No</label>
<br/> Intelligence:
<label><input type="radio" name="intelligence" value="yes" />Yes</label>
<label><input type="radio" name="intelligence" value="no" />No</label>
<br/> Initiative:
<label><input type="radio" name="initiative" value="yes" />Yes</label>
<label><input type="radio" name="initiative" value="no" />No</label>
<br/>
<input type="submit" />
</form>