select only one checkbox from group of checkbox and make it required

Question

I am making a form where I need multiple selection field using checkbox like gender, nationality, marital status. I want to make field required & select exactly one option from the options.

 $(document).ready(function(){ $('.check3').click(function() { $('.check3').not(this).prop('checked', false); }); $('.check4').click(function() { $('.check4').not(this).prop('checked', false); }); $('.check5').click(function() { $('.check5').not(this).prop('checked', false); }); $('.check6').click(function() { $('.check6').not(this).prop('checked', false); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="border border-dark col-sm-3"> <h4 class="d-inline">Gender</h4> </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 class="border border-dark col-sm-3"> <h4 class="d-inline">Marital Status</h4> </div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check4">Married</div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check4">Unmarried</div> <div class="border border-dark col-sm-5"><input type="checkbox" class="check4">Others</div> <div class="border border-dark col-sm-3"> <h4 class="d-inline">Nationality</h4> </div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check5">IN-Indian</div> <div class="border border-dark col-sm-7"><input type="checkbox" class="check5">Others(ISO 3166 Country Code)</div> <div class="border border-dark col-sm-3"> <h4 class="d-inline">Residental Status</h4> </div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check6">Resident Individual</div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check6">Non Resident Indian</div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check6">Foreign National</div> <div class="border border-dark col-sm-3"><input type="checkbox" class="check6">Person of Indian Origin</div> <input type="submit">

I used jquery & repeat same code. please optimize my code & make it required

Answer 1

It can write same as : (add attribute name same as radio )

 $(document).ready(function(){ $('.check').click(function() { let name = $(this).attr("name") if($(this).prop('checked')){ $('.check[name="'+ name +'"]').prop('required', false) } else { $('.check[name="'+ name +'"]').prop('required', true) } $('.check[name="'+ name +'"]').not(this).prop('checked', false) }) $("#form").on('submit', function(e){ console.log('submit') e.preventDefault() return false }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <div class="border border-dark col-sm-3"> <h4 class="d-inline">Gender</h4> </div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="gender" required>Male</div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="gender" required>Female</div> <div class="border border-dark col-sm-5"><input type="checkbox" class="check" name="gender" required>Transgender</div> <div class="border border-dark col-sm-3"> <h4 class="d-inline">Marital Status</h4> </div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="marital" required>Married</div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="marital" required>Unmarried</div> <div class="border border-dark col-sm-5"><input type="checkbox" class="check" name="marital" required>Others</div> <div class="border border-dark col-sm-3"> <h4 class="d-inline">Nationality</h4> </div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="nationality" required>IN-Indian</div> <div class="border border-dark col-sm-7"><input type="checkbox" class="check" name="nationality" required>Others(ISO 3166 Country Code)</div> <div class="border border-dark col-sm-3"> <h4 class="d-inline">Residental Status</h4> </div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="residental" required>Resident Individual</div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="residental" required>Non Resident Indian</div> <div class="border border-dark col-sm-2"><input type="checkbox" class="check" name="residental" required>Foreign National</div> <div class="border border-dark col-sm-3"><input type="checkbox" class="check" name="residental" required>Person of Indian Origin</div> <input type="submit"> </form>

Update add required with checkbox