2012-01-23 14 views
0

私は、ユーザーがその選択からラジオボタンとテキストを使用して選択が後でページ内のテキストボックスに表示する必要が作る持っている必要があります: HTML:jQueryとラジオボタンを使用して、要素のテキストをフォームに入力することはできますか?

  <div id="centercontainer"> 
      <h1>competition</h1> 
      <form id="devices"> 
       <fieldset> 
       <div id="bf"> 
        <img src="images/_black_fuchsia.jpg" width="169" height="266" alt=" Black Fuchsia"> 
        <p><label> <input class="selected-bf" type=radio name=Lumia> Fuchsia on Black</label></p> 
       </div> 
       <div id="bw"> 
        <img src="images/_black_white.jpg" width="169" height="266" alt=" Black White"> 
        <p><label> <input class="selected-bw" type=radio name=Lumia> White on Black</label></p> 
       </div> 

       <div id="by"> 
        <img src="images/_black_yellow.jpg" width="169" height="266" alt=" Black Yellow"> 
        <p><label> <input class="selected-by" type=radio name=Lumia> Yellow on Black</label></p> 
       </div> 
       <div id="wb"> 
        <img src="images/_white_black.jpg" width="169" height="266" alt=" White Black"> 
        <p><label> <input class="selected-wb" type=radio name=Lumia> Black on White</label></p> 
       </div> 
       <div id="wc"> 
        <img src="images/_white_cyan.jpg" width="169" height="266" alt=" White Cyan"> 
        <p><label> <input class="selected-wc" type=radio name=Lumia> Cyan on White</label></p> 
       </div> 
       <div id="wf"> 
        <img src="images/_white_fuchsia.jpg" width="169" height="266" alt=" White Fuchsia"> 
        <p><label> <input class="selected-wf" type=radio name=Lumia> Fuchsia on White</label></p> 
       </div> 
       </fieldset> 
      </form> 
     </div> 
     <div id="footer"> 
      <button class="choose">Choose</button> 
     </div> 

Javascriptを:

// Style chooser  
$('#devices div').toggle(function() { // first time 
    $(this).find('input:radio').attr('checked', true); 
}, function() { // second time 
    $(this).find('input:radio').attr('checked', false); 
}); 

$('.choose').click(function() { 
    if($('input:radio').is(':checked')) { alert("it's checked"); } 
}); 

ユーザーが選択したら、その選択肢のテキストを下部のテキストフィールドに入力できますか?

+0

をする必要があり、正確にあなたの問題は何ですか? –

+0

あなたの質問に答えるために、はい。 – j08691

答えて

0

<div id="output"></div> 

すなわちボタン

あなたがID出力でのdivを追加すると仮定すると、
$('.choose').click(function() 
{  
    $('#output').text($('input:radio:checked').closest('label').text()); 
}); 

へのごバインドのためにこれを試してみてください。また、あなたが上のラジオボタンを1セットだけ持っていることを前提としていページ。それ以外の場合は、入力選択を修飾する必要があります。

$('.choose').click(function() { 
    if($('input:radio').is(':checked')) { alert($(this).val()); } 
}); 

あなたが持っている「$(この).val()」一度あなたが任意の関数あなたにそれを渡すことができますクラスまたは親要素で

+0

これはそれをひっくり返しました、ありがとうございます。私はIDの出力との入力テキストボックスに入力を変更しなければならなかった、それは夢のように動作します、あなたの助けを大変感謝します。 –

0

は、私はあなたがこのような何かを行うことができますかなり確信していますあなたが欲しいものを何でもしたいと思っています。

$('button').click(function(){ 
    $('input[name="foo"]').val($('input[name="Lumia"]:checked').parent().text()); 
}); 

注あなたの例では、あなたは良い形で引用符であなたのattibute値を囲む必要があること:あなたが「foo」という名前のテキストフィールドを持っていると仮定すると

0

<input class="selected-wf" type=radio name=Lumia><input class="selected-wf" type="radio" name="Lumia">

関連する問題