在每个div中添加带有img标题的表单复选框

时间:2012-08-31 00:01:15

标签: javascript jquery html forms

如何通过增加id来为每个div添加一个表单复选框?

目前有:

<div class="img-wrap">
    <img title="1" src="img.jpg" />
</div>
<div class="img-wrap">
    <img title="2" src="img.jpg" />
</div>
<div class="img-wrap">
    <img title="3" src="img.jpg" />
</div>

我想要

<div class="img-wrap">
    <img title="1" src="img.jpg" />
    <input type="checkbox" name="1" value="1" />
</div>
<div class="img-wrap">
    <img title="2" src="img.jpg" />
    <input type="checkbox" name="2" value="2" />
</div>
<div class="img-wrap">
    <img title="3" src="img.jpg" />
    <input type="checkbox" name="3" value="3" />
</div>

jQuery或Javascript会很棒!谢谢:))

3 个答案:

答案 0 :(得分:2)

这样的事情应该解决:

$('.img-wrap img').each(function(){
  var id = $(this).attr('title');
  $('<input type="checkbox" name="'+id+'" value="'+id+'" />').insertAfter(this);
});

答案 1 :(得分:2)

$("img").each(function(){
    var id = $(this).attr("title");
    $(this).parent().append("<input type='checkbox' name='"+ id +"' value='"+ id +"' />");
});

答案 2 :(得分:0)

$(function(){
    var ele, val;
    $("div.img-wrap img").each(function(){
        ele = $(this);
        val = ele.attr("title");
        ele.after($('<input type="checkbox" name="' + val + '" value="' + val + '" />'));
    });
});​