i am making a form where i need to make gender field by using checkbox and make it required
$(document).ready(function() {
$('.check3').click(function() {
$('.check3').not(this).prop('checked', false);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mx-auto">
<div class="border border-dark col-sm-3">
<h4 class="d-inline">Gender</h4>
<p class="d-inline">*</p>
</div>
<div class="border border-dark col-sm-2"><input type="checkbox" class="check3">Male</div>
<div class="border border-dark col-sm-2"><input type="checkbox" class="check3">Female</div>
<div class="border border-dark col-sm-5"><input type="checkbox" class="check3">Transgender</div>
</div>here I am able to select any one field out of 3 but cannot make it required
Okay I am changed
at the same time =>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
</script>
<p>Box Set 1</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<input type="button" value="Test Required" id="checkBtn">
</body>
</html>