如何从ajax加载的内容中获取复选框值

I have external file which generate the checkbox list. And this file was load through jquery load. I want the checkbox click and update its parent div with something.

html

<div id="testiContent"></div>

checkbox.php

<div class="alert alert-info"><input type='checkbox' class='groupid' value='1'>1</div>
<div class="alert alert-info"><input type='checkbox' class='groupid' value='2'>2</div>
<div class="alert alert-info"><input type='checkbox' class='groupid' value='3'>3</div>

jquery

$('#testiContent').load('checkbox.php');//load file via ajax
$("#testiContent input.groupid").change(function(){
    if($(this).is(":checked")){
        $(this).parents().addClass("alert alert-success"); 
    }else{
        $(this).parent().removeClass("alert alert-success");  
    }
});

Ideally, when the checkbox click, then the alert div will change into green. I can make it working on the normal scrip but not a chance with ajax.

Fiddle here : http://jsfiddle.net/o6Lk17db/1/

You can't bind to an element that isn't there yet, so your dynamically added ones aren't subject to the $"#testiContent input.groupid" selector. The way around this is to bind to something that is already present. For example, the parent container where your elements are dynamically being added.

Try something like this:

$("#testiContent").on('change', 'input', function(){ ... });

will attach a listener to the parent, specifically for events on the appropriate (input) targets within that parent.

When html controls are loaded dynamically, events for these controls needs to be bind manually. So you need to bind check/click events once element adding is done. You can write code as

$(document).on("change","input.groupid").change(function(){
  // your code here
});

use this

$("input.groupid").change(function() {
  if ($(this).is(":checked")) {
  alert($("input.groupid").val());
    $(this).closest('div').removeClass("alert-info");
    $(this).closest('div').addClass("alert-success");
  } else {
    $(this).closest('div').removeClass("alert-success");
    $(this).closest('div').addClass("alert-info");
  }
});

My hunch is that you are simply attaching the change listener before the content is loaded in the DOM, so it doesn't actually target anything. You could pass a callback function to load only attempt to attach the change listener after the content is in the DOM, but it might be easier to just use the on method on the document-- that way it is evergreen and doesn't need to rely on callbacks:

$('#testiContent').load('checkbox.php');//load file via ajax
$(document).on('change', 'input.groupid', function(e){
    var target = e.target;
    if($(target).is(":checked")){
        $(target).parents().addClass("alert alert-success"); 
    }else{
        $(target).parent().removeClass("alert alert-success");  
    }
});

That may not be exactly right but I think it will at least trigger.

You need to use change event on document because the content is loaded via ajax. and you can use toggleclass function for change the parent div.

$('#testiContent').load('checkbox.php');//load file via ajax
$(document).on('change', '.groupid', function(e) {
    $(this).closest("div").toggleClass("alert-success alert-info"); 
});