チェックされたラジオボタンの値に応じて、要素を動的に追加または削除します。

Question

ラジオボタンには数値の値があり、ボタンを1つまたは複数選択すると表示される要素の数を表します。

<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をチェックして3つのレンダリングをした後、より小さい値（1または2）で入力をチェックすると、正確にこの数のelemetsが表示され、新しいものには追加されません。私はこの

$('.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/時計のように動作します