0

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

Siddharth Rathod
  • 634
  • 1
  • 7
  • 21
Md Mohtesham Azam
  • 21
  • 5
  • Hi, Have you tried this? https://stackoverflow.com/questions/6218494/using-the-html5-required-attribute-for-a-group-of-checkboxes – Arvind Maurya Jun 06 '22 at 07:52
  • Does this answer your question? [Using the HTML5 "required" attribute for a group of checkboxes?](https://stackoverflow.com/questions/6218494/using-the-html5-required-attribute-for-a-group-of-checkboxes) – 0stone0 Jun 09 '22 at 10:35

1 Answers1

0

Okay I am changed

at the same time =>

source

<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>
Baki gül
  • 1
  • 1