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

Question

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

<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教程：http://jquerybrasil.org/criando-elementos-com-jquery/

<script>
    $("#formTest").change(function () {       
       $('<div>',{
         id : 'imageTow or One',
       });

    });    
</script>

当选中任何复选框时，我需要在div#test内创建一个div，其中包含相应的复选框图像。我该怎么办？

下面的图片解释了应该发生的事情。

Answer 1

如果我做对了，只要点击一个复选框，就应该在div test内创建一个带有相应复选框图像的div。

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

• 更正了输入，它们必须具有名称和值属性
• 添加了标签元素，for是具有该ID的输入的引用
• 奖励：因为我们正在使用标签并且它正在引用该复选框，当您单击图像本身时，它的行为就像您单击了复选框一样，这简化了用户体验

<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 test缺少id属性，因此请更正：

<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>');
    }
});

PS：.prop('outerHTML')如果您正在使用jQuery 1.6 +

，则会有效

从你粘贴的链接猜测，我猜你知道葡萄牙语。如果您在使用此英语堆栈溢出时遇到问题，可以使用Portuguese Stackoverflow