根据选中的单选按钮的值动态添加或删除元素

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/