Jquery problem with checkbox (dynamically) check selector

Question

I have a problem with jQuery. I have an html page with a form.

In my form I have a select:

<select class="form-control" id="macro_area" name="macro_area">
  <option value="0">Select type</option>
  <option value="1">test</option>
  <option value="7">Other</option>
</select>

When I select an option, I load a php file with this jQuery function:

$('document').ready(function() {
    $('#macro_area').on('change', function() {
        request = $.ajax({
             type: "POST",
             url: "get_bus_act_subcat.php",
             data: { id_macro_area: id_macro_area },
             dataType: "html"
        });   

        request.done(function(response) { 
            $(".act_subcat").html (response);
        });
});

The procedure works correctly and adds html code (generated from the file get_bus_act_subcat.php) to the page, in a div (<div class="form-group act_subcat">) originally empty.

Code generated and inserted in page is similar to this:

<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
     </div>
   ......     
    </div>
  </div>
</div>

So the final result is:

<div class="form-group act_subcat"> //this div is present on page when load
<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
     </div>
   ......     
    </div>
  </div>
</div>
</div>

Now I have my problem... I want to check with jQuery if any of the checkboxes have been checked but standard solution/selector not function.

I think because the checkbox fields have been added later.

Any ideas or suggestions?

Thanks

Do you want to know when they're ticked? Or just if they are ticked? ie what event are you within when you attempt the check? The checkbox click/change or a separate (eg button) click handler? If it's "if any have been checked" then please include your selector - that should be fine. If it's "when they are checked" then please include your event handler - it probably needs to be converted to event delegation (see stackoverflow.com/questions/203198/…) — fdomn-m
– fdomn-m, Commented Sep 3, 2020 at 16:05
Your question is not clear But i assume that you check checkboxes with jquery after loading html via Ajax and you are not able to get value via Jquery is that correct? — Subhash Shipu
– Subhash Shipu, Commented Sep 3, 2020 at 16:07
Where is the code that you've tried that does not work? What error do you get? What, exactly, do you need help with? — PeterKA
– PeterKA, Commented Sep 3, 2020 at 16:07
"I want to check with jquery if any of the checkboxes have been checked" What are you doing adding an event listener? — epascarello
– epascarello, Commented Sep 3, 2020 at 16:16

Carsten Massmann · Accepted Answer · 2020-09-03 16:34:45Z

3

Maybe the following is helpful to you?

$('.act_subcat').on('change','input',
  function(ev){console.log(this.id+" was clicked and is"+(this.checked?"":" not")+" checked");}
)
$('document').ready(function(){
 $('#macro_area').on('change', function(){
   $(".act_subcat").html(insertHTML(this.value));
 });
});

// substitute for AJAX:
function insertHTML(i){return `<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="5">Test${i++}
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="6">Test${i++}
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="2">Test${i}
     </div> 
    </div>
  </div>
</div>`;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="macro_area" name="macro_area">
  <option value="0">Select type</option>
  <option value="1">test</option>
  <option value="7">Other</option>
</select>
<div class="act_subcat"></div>

I replaced your AJAX part with another HTML-importing function. I demonstrate the event binding with an .on relative to the .act_subcat container. The function inside will fire whenever an input element in this container changes. And this will work for any dynamically added content. Try it out.

answered Sep 3, 2020 at 16:34

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frequent Flyer Italia Over a year ago

` $('.act_subcat').on('change','input' ...` solved my problem. THANKS!

PeterKA · Accepted Answer · 2020-09-03 16:42:15Z

0

One approach you can take is to attach the event listener to the returned content prior to adding it to the page:

$(response).find(':checkbox').on('change', function() {
    console.log( `Checkbox with id: ${this.id} was clicked` );
});
//then ... append it ......html( response );

answered Sep 3, 2020 at 16:42

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Jquery problem with checkbox (dynamically) check selector

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related