At least one checkbox checked using jQuery siblings function

Question

I have this code:

$(document).on('click','.subject_add',function() {
      var $ele = $("input[type='checkbox']");
    var $btn = $(this);
    var $sameCheck = $btn.attr('id') && $ele.is(':checked') == $ele.attr('id').split('_')[2];
    alert($sameCheck);
    if(!$ele.is(':checked')) {
      Swal.fire('Oops','Please select the Add-on','error');
      return;
    }
    if($sameCheck) {
      Swal.fire('Oops','Please select the correct Add-on for the button','error');
      return;
    }
}

I am trying to make sure that every checkbox checked from the button which has the same ID. But possibly something is going wrong where it is not matching the same checkbox with same button.

my html:

<div align="left">
  <p>
    <input type="checkbox" class="checkboxid" name="subject_add" id="subject_add_3">
  <a href="javascript:;" class="btn btn-sm btn-info subject_add" id="3">Yes</a></p>

  <p>
    <input type="checkbox" class="checkboxid" name="subject_add" id="subject_add_4">
  <a href="javascript:;" class="btn btn-sm btn-info subject_add" id="4">Yes</a></p>

</div>

Answer 1

Is that closer to what you want?

When a click is made on a .subject_add link, there is an error message if the checkbox was not checked.

It uses .siblings() to target the sibling checkboxes. No need for any id here. Just check if the checked count is the same as the checkbox count.

It would be easier to debug if you use a Swall error and a Swall success ... With two error messages, sure it is getting confusing. ;)

 $(document).on('click', '.subject_add', function() { let boxCount = $(this).siblings("input[type='checkbox']").length let checkedCount = $(this).siblings("input[type='checkbox']:checked").length if (checkedCount) { Swal.fire('Okay,', 'The checkbox is checked'; 'success'). } else{ Swal,fire('Oops'. 'Check the checkbox first,'; 'error'); } })

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.14.0/sweetalert2.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.14.0/sweetalert2.min.js"></script> <div align="left"> <p> <input type="checkbox" class="checkboxid" name="subject_add"> <input type="checkbox" class="checkboxid" name="subject_add"> <input type="checkbox" class="checkboxid" name="subject_add"> <input type="checkbox" class="checkboxid" name="subject_add"> <input type="checkbox" class="checkboxid" name="subject_add"> <a href="javascript:;" class="btn btn-sm btn-info subject_add">Yes</a></p> <p> <input type="checkbox" class="checkboxid" name="subject_add"> <input type="checkbox" class="checkboxid" name="subject_add"> <input type="checkbox" class="checkboxid" name="subject_add"> <a href="javascript:;" class="btn btn-sm btn-info subject_add">Yes</a></p> </div>