如果在jquery中选中任何复选框，如何中断循环？

Question

This is my first time using jquery so don't mind me!

I have a div tag which has many checkboxes inside and a modal. When the page first load I want to loop through all those checkboxes inside div tag and if all checkboxes are empty (not checked) I want to display a modal but if any of those checkboxes is checked the modal will not showup.

I have tried like this

<div class="row" id="t-department-check">
   <h6><input type="checkbox" class="t-check">Work</h6>
   <h6><input type="checkbox" class="t-check">Stay</h6>
   <h6><input type="checkbox" class="t-check">Fun</h6>
   <h6><input type="checkbox" class="t-check">Go</h6>
</div>

<div id="department-modal"></div> <--my modal

<script>
      $(function () {
        $("#t-department-check .t-check").each(function () {
          if ($(this).is(":checked")) {
            $("#department-modal").modal("hide");
            console.log("Modal Hide");
            return false; // try to break the loop 
          }
          else if (!$(this).is(":checked")) {
            $("#department-modal").modal("show");
            console.log("Not yet");
            return true;
          }
        })
      });
    </script>

My problem is if the second or third or fourth checkbox is checked but the first is empty the modal will show up and it will print like this to console

Not yet
Modal Hide
Not yet
Not yet

But if the first checkbox is checked and other are empty the modal will remain hide and it print like this in console

Modal Hide

I want to hide or make the modal not to be shown if any checkbox is checked. How can I fix it?

Answer 1

Other way to do above is to check if the length of checkboxes and the length of checked checkboxes is not equal to 0 depending on this hide() or show() your modal

Demo code :

 $(function() { //get length of checkbox var length = $("#t-department-check .t-check").length; console.log("length of checkboxes "+length) //get checked checkboxes length var checked_ = $("#t-department-check .t-check:checked").length console.log("length of checked "+checked_) //check if !0 if ((checked_ != 0) && (checked_ <= length)) { console.log("Modal Hide"); //hide your modal } else { //show your modal console.log("Not yet"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row" id="t-department-check"> <h6><input type="checkbox" class="t-check" >Work</h6> <h6><input type="checkbox" class="t-check" >Stay</h6> <h6><input type="checkbox" class="t-check" >Fun</h6> <h6><input type="checkbox" class="t-check" >Go</h6> </div> <div id="department-modal"></div> <--my modal

Answer 2

I think the only correction required is in logic of looping through checkboxes. You need to first completely loop through all checkboxes element and then decide whether to show modal or not.

$(function () {
        $("#t-department-check .t-check").each(function () {
          var showModal = true;
          $("#department-modal").modal("hide");
          if ($(this).is(":checked")) {
              showModal = false;
              return false; // try to break the loop 
          }else{
                  console.log("Modal Hide"); 
          }
 
        });

        if(showModal){
            $("#department-modal").modal("show");
            console.log("Not yet");          
          }
      });