0
[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>
いいえ入力インラインを表示します。入力を新しい行に表示する必要があるか、それとも自分自身でラップするか
問題を理解しているかどうかわからない:新しい行に入力フィールドを入れたい?最後のラジオボタンの後には「
」があり、これが起こることを確認する必要があります。また、 'enableTxt()'定義の 'inline'の代わりに' display'プロパティを 'block'に設定することもできます。入力フィールドにラベルが必要な場合は、divのラベルと入力フィールドをラップし、コード内の '' price "'の代わりにこのラッパーのIDを使用します。 –
それを試しましたが、おそらくブロックの問題です。 Julian – 422