單擊收音機選項時顯示文本框

我試圖讓此功能顯示/隱藏文本框元素。到目前爲止，我沒有幸運。任何人都可以告訴我如何顯示和隱藏元素，通過設置其風格可見或不等待您選擇什麼無線電選項？這是我到目前爲止。單擊收音機選項時顯示文本框

腳本

  function hide(id) 
      { 
       document.getElementById(id).style.visibility='hidden'; 
      } 

      function show(id) 
      { 
       document.getElementById(id).style.visibility='visible'; 
      }

HTML

  <div data-role="fieldcontain" data-theme="c" id="quests'+id+'"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
      <label>Question?</label> 

      <input type="radio" name="radio1" id="'+QuestionID+'_1" value="1" onClick="show("comment_'+QuestionID+'")"/> 
      <label for="'+QuestionID+'_1">Yes</label> 

      <input type="radio" name="radio1" id="'+QuestionID+'_0" value="0" onclick="hide("comment_'+QuestionID+'")"/> 
      <label for="'+QuestionID+'_0">No</label> 
      </fieldset> 

      //I am trying to make these visable if yes is selected 
      <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;" id="comment_'+QuestionID+'"></textarea> 
      <br /> 
      </div>

謝謝！

來源

2013-02-27 user1857654

您需要先修正你的ID。 '+ QuestionID +'_ 1沒有任何意義。 – 2013-02-27 18:59:20

onSelect在單選按鈕上沒有任何意義......它用於在輸入字段中「選擇」文本。改爲使用onClick。但是，如果您使用onClick，則需要檢查單選按鈕是否真的被選中，所以這會使JS部分變得複雜。

既然你標記了一個問題，「jQuery的」，這裏是我會做什麼：

HTML：

<div class="radioToggle" data-role="fieldcontain" data-theme="c" id="quests'+id+'"> 
    <fieldset data-role="controlgroup" data-type="horizontal"> 
     <label>Question?</label> 

     <input type="radio" name="radio1" id="'+QuestionID+'_1" value="1" /> 
     <label for="'+QuestionID+'_1">Yes</label> 

     <input type="radio" name="radio1" id="'+QuestionID+'_0" value="0" /> 
     <label for="'+QuestionID+'_0">No</label> 
    </fieldset> 

    //I am trying to make these visable if yes is selected 
    <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;" id="comment_'+QuestionID+'"></textarea> 
    <br /> 
</div>

JS：

$('.radioToggle').on('click', 'input:radio', function(){ 
    var parent = $(this).closest('.radioToggle'), 
     textbox = parent.find('textbox'); 
    if ($(this).attr('id') == '1') { 
     textbox.show(); 
    } else { 
     textbox.hide(); 
    } 
})

來源

2013-02-27 19:00:22 Steve

我應該提到它不能與onClick一起使用，但是我確實已將其更改回onClick。 – user1857654 2013-02-27 19:03:57

onClick不僅會在單擊單選按鈕時觸發，還會觸發旁邊的文本。你可能想要onChange。 – MattDiamant 2013-02-27 19:09:09

當然，但即使使用onChange，它仍然必須檢查是否選擇了radiobox。所以沒有太多的收穫。 – Steve 2013-02-27 19:11:19

我認爲你要完成生成的代碼（可能是PHP）的東西。下面是你需要做什麼要點：

<div data-role="fieldcontain" data-theme="c" id="quests'+id+'"> 
    <fieldset data-role="controlgroup" data-type="horizontal"> 
     <label>Question?</label> 
     <input type="radio" name="radio1" value="1" data-id="123" /> 
     <label>Yes</label> 
     <input type="radio" name="radio1" value="0" data-id="123" /> 
     <label>No</label> 
    </fieldset> 
    <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;"></textarea> 
    <br /> 
</div> 
<div id="comment_123" style="display:none">here I am</div>

和腳本：

$("input[type='radio']").change(function() { 
    if ($(this).val() == "1") { 
     $('#comment_' + $(this).data("id")).show(); 
    } else { 
     $('#comment_' + $(this).data("id")).hide(); 
    } 
});

這裏有一個小提琴來說明這個想法：http://jsfiddle.net/DgAHf/

來源

2013-02-27 19:05:21 Candide

$('input[type="radio"][name="radio1"]').on('change', function() { 
    $('textarea[name="textarea"]').toggle($.trim(this.value)=='1'); 
});

FIDDLE

來源

2013-02-27 19:14:27 adeneo

單擊收音機選項時顯示文本框

回答

相關問題