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

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 >
  <h4 >Gender</h4>
</div>
<div ><input type="checkbox" >Male</div>
<div ><input type="checkbox" >Female</div>
<div ><input type="checkbox" >Transgender</div>

<div >
  <h4 >Marital Status</h4>
</div>
<div ><input type="checkbox" >Married</div>
<div ><input type="checkbox" >Unmarried</div>
<div ><input type="checkbox" >Others</div>

<div >
  <h4 >Nationality</h4>
</div>
<div ><input type="checkbox" >IN-Indian</div>
<div ><input type="checkbox" >Others(ISO 3166 Country Code)</div>

<div >
  <h4 >Residental Status</h4>
</div>
<div ><input type="checkbox" >Resident Individual</div>
<div ><input type="checkbox" >Non Resident Indian</div>
<div ><input type="checkbox" >Foreign National</div>
<div ><input type="checkbox" >Person of Indian Origin</div>

<input type="submit">

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

CodePudding user response：

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 >
  <h4 >Gender</h4>
</div>
<div ><input type="checkbox"  name="gender" required>Male</div>
<div ><input type="checkbox"  name="gender" required>Female</div>
<div ><input type="checkbox"  name="gender" required>Transgender</div>

<div >
  <h4 >Marital Status</h4>
</div>
<div ><input type="checkbox"  name="marital" required>Married</div>
<div ><input type="checkbox"  name="marital" required>Unmarried</div>
<div ><input type="checkbox"  name="marital" required>Others</div>

<div >
  <h4 >Nationality</h4>
</div>
<div ><input type="checkbox"  name="nationality" required>IN-Indian</div>
<div ><input type="checkbox"  name="nationality" required>Others(ISO 3166 Country Code)</div>

<div >
  <h4 >Residental Status</h4>
</div>
<div ><input type="checkbox"  name="residental" required>Resident Individual</div>
<div ><input type="checkbox"  name="residental" required>Non Resident Indian</div>
<div ><input type="checkbox"  name="residental" required>Foreign National</div>
<div ><input type="checkbox"  name="residental" required>Person of Indian Origin</div>

<input type="submit">
</form>

Update add required with checkbox