php - 我想使用 jquery 或 javascript 将 html 中的文本字段动态添加到特定按钮

Question

这是我的代码

<div class="rButtons">
    <input type="radio" name="numbers" value="10" />10
    <input type="radio" name="numbers" value="20" />20
    <input type="radio" name="numbers" value="other" />other
</div>

我想，当有人选择“其他”单选按钮时，他应该显示一个文本字段，他可以在其中输入值。此文本字段应位于其他字段的右侧。

此外，我希望该框仅限于 10 的倍数的值。

我是新手，所以请更新代码并返回给我。

我使用 jquery-1.4.2.js

Answer 1

在带有 jquery 的 javascript 中，你会这样做。并尝试先解决您的问题。

  var item = $('input[name=numbers]:checked').val();
    if(item == 'other'){
    //Show your textbox
    }

Answer 2

html:

<div class="rButtons">
    <input type="radio" name="numbers" value="10" />10
    <input type="radio" name="numbers" value="20" />20
    <input type="radio"  name="numbers" value="other" /><span class="text-other">other</span>
    <input class="user-input" style="display: none"></input>
</div>

查询：

$('input[type=radio]').click(function() {

    if ($(this).attr('value') == 'other') {
        $('.text-other').hide();
        $('.user-input').show();
    } else {
        $('.text-other').show();
        $('.user-input').hide();
    }
});

Answer 3

我在 javascript 中向您展示。首先让你的html文件看起来像这样

<div class="rButtons">
  <input type="radio" name="numbers" value="10" onclick="uncheck();" />10
  <input type="radio" name="numbers" value="20"  onclick="uncheck();" />20
  <input type="radio" name="numbers" value="other" onclick="check(this);"/>other
  <input type="text" id="other_field" name="other_field" onblur="checktext(this);"/>
</div>

在第二步中，编写此 css 代码以最初将文本字段设置为不可见。

<style type="text/css">
#other_field
{
    visibility: hidden;
}
</style>

最后使用这个 javascript 代码来验证用户的行为

<script type="text/javascript">
    function uncheck()
     {
       document.getElementById('other_field').style.visibility = "hidden";
     }
    function check(inputField)
    {
        if(inputField.checked)
        {
            document.getElementById('other_field').style.visibility = "visible";
        }
    }
    function checktext(inputField)
    {
        if(isNaN(inputField.value))
        {
            alert('only numbers are allowed..');
            return false;
        }
        else if( (inputField.value % 10 ) != 0)
        {
            alert('only multiples of 10..');
            return false;
        }
        else
        {
            return true;
        }

    }
    </script>

第一个函数检测用户是否单击了“其他”单选按钮并显示隐藏的文本字段。

第二个函数根据您的要求验证输入字段...