我需要验证动态创建的复选框，对于每个问题的一些复选框答案，用户至少选择一个...如果选中第二个复选框，则只有第一个复选框答案适用于所有问题，它显示未选中。用户可以选择任何选项。
$(function() {
//function validate_form() {
$("#continueButton").click(function() {
$('input:checkbox').map(function() {
//var rname = $(this).attr('name');
var rname = $(this).attr('id');
console.log(rname);
var check_box = $('#' + rname),
names1 = $.unique(check_box.map(function() {
return this.name;
})),
checked = check_box.filter(function() {
return this.checked;
});
alert(names1.length);
alert(checked.length);
//alert(check_box.is(':checked'));
//alert(check_box.is(':checked'));
if (names1.length != checked.length) {
//alert('all answers are checked');
isCheck = false;
alert("select checkbox");
//$('#e_'+rname).html("Please select the answer");
return false;
}
});
if (isCheck) {
//return true;
flagchk = 1
} else {
flagchk = 0;
return false;
}
if (flagchk == 1) {
//if(flagradio == 1 && flagchk==1){
return true;
} else {
return false;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form name="sample" id="sample" method="post" action="sample.php">
<label for="How was the breakfast?" id="label_error">How was the breakfast?</label>
<br>
<input type="checkbox" id="20" name="20_85" style="width: auto;display: inline-block;height: auto;" value="85" class="checkbox_check"> Not good
<input type="checkbox" id="20" name="20_84" style="width: auto;display: inline-block;height: auto;" value="84" class="checkbox_check"> Good
<span class="red_12">*</span>
<br>
<label for="How was the meal ?" id="label_error">How was the meal ?</label>
<br>
<input type="checkbox" id="28" name="28_92" style="width: auto;display: inline-block;height: auto;" value="92" class="checkbox_check"> Good
<input type="checkbox" id="28" name="28_93" style="width: auto;display: inline-block;height: auto;" value="93" class="checkbox_check"> Average
<input type="checkbox" id="28" name="28_94" style="width: auto;display: inline-block;height: auto;" value="94" class="checkbox_check"> Not good
<div class="two-col buttonContainer">
<a href="javascript:void(0);" id="continueButton" class="button">Book It Now</a>
</div>
</form>使用父
divfor am 组的问题，以便操作更容易。
$(':checkbox')选择器将返回所有类型为checkbox的元素
.filter可用于根据条件过滤掉元素。
试试这个：
$("#continueButton").click(function() {
$('.form-elem').each(function() {
var length = $(this).find(':checkbox').filter(function() {
return this.checked;
}).length;
if (length == 0) {
alert($(this).find('label').text() + ' :: not answered!');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form name="sample" id="sample" method="post" action="sample.php">
<div class="form-elem">
<label for="How was the breakfast?" id="label_error">How was the breakfast?</label>
<br>
<input type="checkbox" id="20" name="20_85" style="width: auto;display: inline-block;height: auto;" value="85" class="checkbox_check"> Not good
<input type="checkbox" id="20" name="20_84" style="width: auto;display: inline-block;height: auto;" value="84" class="checkbox_check"> Good
<span class="red_12">*</span>
</div>
<br>
<div class="form-elem">
<label for="How was the meal ?" id="label_error">How was the meal ?</label>
<br>
<input type="checkbox" id="28" name="28_92" style="width: auto;display: inline-block;height: auto;" value="92" class="checkbox_check"> Good
<input type="checkbox" id="28" name="28_93" style="width: auto;display: inline-block;height: auto;" value="93" class="checkbox_check"> Average
<input type="checkbox" id="28" name="28_94" style="width: auto;display: inline-block;height: auto;" value="94" class="checkbox_check"> Not good
</div>
<div class="two-col buttonContainer">
<a href="javascript:void(0);" id="continueButton" class="button">Book It Now</a>
</div>
</form>在这里摆弄