如何選擇輸入複選框，並創建其他分區

Question

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

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

    });  
</script> 

當選中任何複選框時，我需要在div#test內部創建一個div，其中包含相應的複選框圖像。我該怎麼做？

下面是解釋將發生什麼的圖像。

Answer 1

如果我猜中了，每當一個複選框，單擊它應該創建一個div內div test與相應的複選框圖像。

我對錶單做了一些修改，所以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