如何将复选框添加到主div的子div中

Question

我想为每个子项添加一个复选框。 对于我用

var len = $("#personalDetails").children("div").length; 
    for(var id=0; id<len;id++) 
    { 
     var el = $('<input type="checkbox"/>'); 
     $("#personalDetails").children(":first").attr("id",id); 
     alert(id); 
     $("#"+id).append(el);  
    } 

HTML

<div id="personalDetails"> 
    <div>personal</div> 
    <div>Education</div> 
</div> 

通过这样做，我有一个问题。所有复选框都在一个div下。我如何设置一个div用于其他div？ [注：我们不能把对儿童进行任何id或class的div] http://jsfiddle.net/QTzrB/

Answer 1

可以

$(document).ready(function(){ 
    $('#personalDetails > div').each(function(idx, el){ 
     $('<input type="checkbox"/>').attr("id", idx).appendTo(el); 
    }) 
    $('#personalDetails').on('click', 'input[type="checkbox"]', function(){ 
     alert(this.id); 
    }); 
}); 

演示：Fiddle

Answer 2

尝试这个

$(document).ready(function(){ 
    var len = $("#personalDetails").children("div").length; 
    $("#personalDetails div").each(function(idx) { 
    $(this).append("<input type='checkbox' id="+ idx +" />"); 
}); 

$("input[type=checkbox]").on("click",function(){ 
     alert($(this).attr("id")); 
}); 
}); 

Fiddle Demo

Answer 3

$(document).ready(function(){  
    $("#personalDetails").children("div").each(function(index, obj) { 
    var $chk = $("<input/>",{"type":"checkbox"}); 
    $(this).prepend($chk.attr("id",index));     
    $chk.on("click",function(){ 
     alert(this.id); 
    }); 
    }); 
}); 

这里工作演示： http://jsfiddle.net/HNezs/

Answer 4

与此更换你的脚本，希望这会做你想要什么。

$(document).ready(function(){ 
    $('#personalDetails').children('div').each(function(){ 
    $(this).append('<input type="checkbox"/>'); 
    }); 
}); 

fiddle

Answer 5

你应该缓存DIV列表。另外，如果您不想将ID添加到输入元素，那么您也可以缓存它们。

以下代码正在处理中Fiddle。

$(document).ready(function(){ 
    var divs = $("#personalDetails").children("div"); 
    var len = divs.length; 

    for(var id = 0; id < len; id++) { 
     var el = $('<input type="checkbox"/>'); 
     divs.eq(id).append(el);  
    } 
});