在新行上显示输入字段(基于单选）

display input field on new line ( based on radio select )

本文关键字：于单选 字段 输入 新行 显示      更新时间：2023-09-26

Ok在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;
    }

Fiddle：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>

为什么不简单地重新排列单选按钮？

<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>

看起来很管用，不是吗？

相关文章：