-5

私のコードです

<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を使用しています

4

3 に答える 3

0

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>

Jクエリ:

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

    if ($(this).attr('value') == 'other') {
        $('.text-other').hide();
        $('.user-input').show();
    } else {
        $('.text-other').show();
        $('.user-input').hide();
    }
});
于 2013-01-22T07:55:50.640 に答える
0

jqueryを使用したjavascriptでは、そのようにします。そして、最初に自分の側でうまくいくようにしてください。 

  var item = $('input[name=numbers]:checked').val();
    if(item == 'other'){
    //Show your textbox
    }
于 2013-01-22T07:45:29.263 に答える
0

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>

2 番目のステップでは、この 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>

最初の関数は、ユーザーが「その他」のラジオ ボタンをクリックしたかどうかを検出し、非表示のテキスト フィールドを表示します。

2 番目の関数は、要件に従って入力フィールドを検証します...

于 2013-01-22T08:12:11.773 に答える