单击收音机选项时显示文本框

问题描述：

我试图让此功能显示/隐藏文本框元素。到目前为止，我没有幸运。任何人都可以告诉我如何显示和隐藏元素，通过设置其风格可见或不等待您选择什么无线电选项？这是我到目前为止。单击收音机选项时显示文本框

脚本

  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>

谢谢！

您需要先修正你的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(); 
    } 
})

我应该提到它不能与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/

答

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

FIDDLE

单击收音机选项时显示文本框

相关推荐