新しい行に入力フィールドを表示する（ラジオ選択に基づいて）

Question

[OK]をクリックすると、スタック上に素晴らしいコードが見つかりました。それをわずかに適応させました。

しかし、本質的に私たちは形式でラジオボックスグループを持っています。これらのラジオボタンの1つをオンクリックすると、入力フィールドが表示されます。

私はこの入力フィールドを新しい行に表示する必要がありますが（新しいラベルも付いていることが好ましい）、苦労しています。

コードは次のとおりです。HTML

<div class="s_row_2 clearfix"> 
     <label><strong>Price</strong></label> 
      <div class="s_full"> 
       <label class="s_radio"><input type="radio" checked="checked" name="r" id="r1" onchange="disableTxt()"/> Free</label> 
       <label class="s_radio"><input type="radio" name="r" id="r2" onchange="disableTxt()"/> Swap/Trade</label> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="disableTxt()"/> Lets Talk</label> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="enableTxt()"/> Price</label> 
        <input type="text" name="r" id="price" style="display:none;width:212px;" size="30" placeholder="Type your price"/> 
      </div> 
    </div> 

JS：

var temp = ''; 
    function disableTxt() { 
     var field = document.getElementById("price"); 
     if(field.value != '') { 
      temp = field.value; 
     } 
     field.style.display = "none"; 
     field.value = ''; 
    } 
    function enableTxt() { 
     document.getElementById("price").style.display = "inline"; 
     document.getElementById("price").value = temp; 
    } 

フィドル：http://jsfiddle.net/ozzy/mnxRr/

基本的に、私は最初のオプションとして価格を好むだろう。そのため、onclickは新しいラベルのラジオ選択の下に入力フィールドを表示します。

任意の提案をしてください

申し訳ありませんおさらいする：

私はそうのようなHTMLを好む：

<div class="s_full"> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="enableTxt()"/> Price</label> 
        <input type="text" name="r" id="price" style="display:none;width:212px;" size="30" placeholder="Type your price"/> 
       <label class="s_radio"><input type="radio" checked="checked" name="r" id="r1" onchange="disableTxt()"/> Free</label> 
       <label class="s_radio"><input type="radio" name="r" id="r2" onchange="disableTxt()"/> Swap/Trade</label> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="disableTxt()"/> Lets Talk</label> 
      </div> 

Answer 1

は、なぜあなたは単にあなたのラジオボタンを並べ替えませんか？

<div class="s_full"> 
    <label class="s_radio"><input type="radio" name="r" id="r3" onchange="enableTxt()"/> Price</label> 
    <label class="s_radio"><input type="radio" checked="checked" name="r" id="r1" onchange="disableTxt()"/> Free</label> 
    <label class="s_radio"><input type="radio" name="r" id="r2" onchange="disableTxt()"/> Swap/Trade</label> 
    <label class="s_radio"><input type="radio" name="r" id="r3" onchange="disableTxt()"/> Lets Talk</label><br /> 
    <input type="text" name="r" id="price" style="display:none;width:212px;" size="30" placeholder="Type your price"/> 
</div> 

と思われますか？