Jquery 如何选择输入复选框并在其他div中自动创建div

我有一个带有两个复选框的简单表单：

<form id="formTest">
    <input type="checkbox" id="imageOne"> <img src="/uploads/imagens/imageone.jpg">
    <input type="checkbox" id="imageTwo"> <img src="/uploads/imagens/imageone.jpg"> 
</form>  

<div id="test">
</div>

下面是创建新元素的jQuery教程：

当选中任何复选框时，我需要在divtest中创建一个div，并在其中包含相应的复选框图像。我怎么做

下面是一幅解释应该发生什么的图片

---

如果我答对了，无论何时单击复选框，它都应该在div测试中创建一个带有相应复选框图像的div

我对表单做了一些更改，因此jQuery可以更轻松地获取图像元素

更正了输入，它们必须具有名称和值属性 添加标签元素后，for是具有该id的输入的引用 好处：因为我们使用的是标签，它引用的是复选框，当您单击图像本身时，它的行为也会像您单击复选框一样，这简化了用户体验 这是您正在寻找的代码，为了更好地理解，我还注释了一些行

// Whenever a checkbox is clicked, execute the following function
$('form#formTest input:checkbox').on('click', function(){

    // this var will be true when checkbox is marked, false otherwise
    var isChecked = $(this).prop('checked');

    // this var contains the id attribute of the checkbox clicked
    var idClicked = $(this).attr('id'); 

    // When checkbox is marked, create the div with image inside
    if (isChecked) {

        // this var contains the div test element
        var divTest = $('div#test'); 

        // this var contains the closest img element to the checkbox clicked
        var image   = $('#label'+idClicked+' img');

        // Append a div inside div test, with the corresponding image html
        divTest.append('<div class="imageOne">'+image.prop('outerHTML')+'</div>');
    }
});

PS:.如果您使用的是jQuery 1.6，则prop'outerHTML'将起作用+

---

从你粘贴的链接猜，我猜你懂葡萄牙语。如果你在这篇英语文章中遇到困难，你可以使用

我很难理解你想做什么。您是否可以在此处更正语法，使问题更清楚？对不起，我在问题中添加了一个图像谢谢Edson Horacio Junior，但源代码似乎缺少*[object]正确显示图像。我写英文版是为了让社区更活跃

<form id="formTest">
    <input type="checkbox" name="imageOne" id="imageOne" value="1"/>
    <label for="imageOne" id="labelimageOne">
        <img src="/uploads/imagens/imageone.jpg">
    </label>

    <input type="checkbox" name="imageTwo" id="imageTwo" value="1"/>
    <label for="imageTwo" id="labelimageTwo">
        <img src="/uploads/imagens/imageone.jpg">
    </label>
</form>

<div id="test">
</div>

// Whenever a checkbox is clicked, execute the following function
$('form#formTest input:checkbox').on('click', function(){

    // this var will be true when checkbox is marked, false otherwise
    var isChecked = $(this).prop('checked');

    // this var contains the id attribute of the checkbox clicked
    var idClicked = $(this).attr('id'); 

    // When checkbox is marked, create the div with image inside
    if (isChecked) {

        // this var contains the div test element
        var divTest = $('div#test'); 

        // this var contains the closest img element to the checkbox clicked
        var image   = $('#label'+idClicked+' img');

        // Append a div inside div test, with the corresponding image html
        divTest.append('<div class="imageOne">'+image.prop('outerHTML')+'</div>');
    }
});