顯示任何數量的文字和複選框在HTML

我有一個複選框，並在一個HTML顯示任何數量的文字和複選框在HTML

<div class ="followupSteps"> 
    <input type="checkbox" id="checkboxFollowup"> 
    <label for="checkboxFollowup" id="labelFollowup"></label> 
</div>

根據輸出的數量從服務器端返回的側面的標籤側，可以有任意數量的複選框和標籤。例如，如果從服務器返回5個輸出，則會有5行（每行是1個複選框和1個標籤）。我怎麼做？

在jQuery中，我有$("#labelFollowup").text(somevar);但它不會創建一個新的行。相反，它會繼續替換HTML中唯一定義的標籤的內容。

來源

2017-08-24 nad

您需要向我們展示生成重複輸入和標籤的代碼。 –

你只需要遍歷返回的數據，然後clone（）和append（）新行 –

$(function(){ 
 
    let div = '<div class ="followupSteps">'+ 
 
    '<input type="checkbox" id="checkboxFollowup">'+ 
 
    '<label for="checkboxFollowup" id="labelFollowup">label</label>'+ 
 
    '</div>'; 
 
    for(var index=0; index<5; index++) 
 
    { 
 
     $('table').append('<tr> <td>'+div+' </td> </tr>') 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
</tr> 
 
</table>

試試這個。

來源

2017-08-24 07:56:17

var $followupDiv = $('.followupSteps'); 
 
var $inputClone = $('input', $followupDiv).clone().removeAttr('id'); 
 
var $labelClone = $('label', $followupDiv).clone().removeAttr('id'); 
 

 
var serverResponse = 5; 
 

 
for (i = 1; i <= serverResponse; i++) { 
 
    $inputClone.clone().attr('id', 'checkboxFollowup' + i).appendTo($followupDiv); 
 
    $labelClone.clone().attr('id', 'labelFollowup' + i).appendTo($followupDiv); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="followupSteps"> 
 
    <input type="checkbox" id="checkboxFollowup"> 
 
    <label for="checkboxFollowup" id="labelFollowup"></label> 
 
</div>

來源

2017-08-24 07:48:58

既然你沒有提供太多的信息，我將只是張貼瞭如何使用一個javascript「爲」 10次循環，並按照您的標記實現它：

for(i=0;i<10;i++) { 
     $('#checkboxFollowup').eq(0).clone().prop('id', 'clone'+i).appendTo('.followupSteps'); 
     $('#labelFollowup').eq(0).clone().prop('id', 'clone'+i).appendTo('.followupSteps'); 
    }

使用下面的jQuery方法：

來源

2017-08-24 07:51:13 Artley

顯示任何數量的文字和複選框在HTML

回答

相關問題