根據選中的單選按鈕的值動態添加或刪除元素

Question

我有一些單選按鈕帶有數字值，表示當我選擇一個或另一個按鈕時應顯示的元素數量。這裏是他們：

<input type="radio" id="one" class="render-input" name="renderVal" value="1" /> 
<input type="radio" id="two" class="render-input" name="renderVal" value="2" /> 
<input type="radio" id="three" class="render-input" name="renderVal" value="3" /> 
<input type="radio" id="four" class="render-input" name="renderVal" value="4" /> 

而且我有，例如，<div></div>，它應該呈現對應於檢查輸入值的次數。例如，如果我檢查input#one，我應該得到一個<div></div>。如果我檢查input#two，則必須有<div></div> <div></div>，依此類推。因此，如果我檢查了例如input#three並得到了三個<div></div>，然後檢查一個輸入值較小（即1或2）的輸入，它應該正好顯示這個數量的元素，而不是將新元素添加到現有元素中。我試圖使它像這樣

$('.render-input').change(function() { 
    for (var i = 1; i <= $(this).val(); i++) 
     $(this).append('<div></div>'); 
}); 

但隨後的唯一途徑遞減，如果用價值較低的輸入被檢查被刪除的所有元素，並再次使它們渲染的元素的數量，而這並不似乎是做到這一點的正確和正確的方式。我怎麼能做到這一點？

Answer 1

您的主要問題在於，您正試圖將div附加到input，這是不可能的。指定一個包含元素並將它們附加到那裏會更有意義。另外請注意，您應該將所選收音機的值解析爲一個整數。試試這個：

$('.render-input').change(function() { 
 
    var html = ''; 
 
    for (var i = 0; i < parseInt(this.value, 10); i++) { 
 
    html += '<div></div>'; 
 
    } 
 
    $('#container').html(html); 
 
});

#container div { 
 
    width: 15px; 
 
    height: 15px; 
 
    border: 1px solid #c00; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" id="one" class="render-input" name="renderVal" value="1" /> 
 
<input type="radio" id="two" class="render-input" name="renderVal" value="2" /> 
 
<input type="radio" id="three" class="render-input" name="renderVal" value="3" /> 
 
<input type="radio" id="four" class="render-input" name="renderVal" value="4" /> 
 

 
<div id="container"></div>

Answer 2

試試這個片斷

<input type="radio" id="one" class="render-input" name="renderVal" value="1" /> 
<input type="radio" id="two" class="render-input" name="renderVal" value="2" /> 
<input type="radio" id="three" class="render-input" name="renderVal" value="3" /> 
<input type="radio" id="four" class="render-input" name="renderVal" value="4" /> 
<span id="output"></span> 

$('.render-input').change(function() { 
var val=""; 
for (var i = 1; i <= $(this).val(); i++) 
    val+='<div>Hi</div>'; 
$("#output").html(val); 

}); 

這裏檢查https://jsfiddle.net/11Lrwtue/