好的,在Stack上发现了一些很棒的代码。稍微适应了它。
但实质上我们有一个单一的无线电盒组。点击其中一个单选按钮,即可显示输入字段。
我需要在新行上显示此输入字段(最好还带有新标签)但是很难挣扎。
代码是: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/
基本上,我更喜欢价格作为第一选择。因此,点击输入字段将显示在带有新标签的无线电选择下方。
请提出任何建议
回顾抱歉:
我更喜欢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>
答案 0 :(得分: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>
似乎可以解决问题,不是吗?