Question

您好我需要知道如何为单选按钮提供点击功能。我需要在单击单选按钮时显示特定类型的文本框。我尝试了很多代码而没有任何工作

单选按钮代码为：

    <html>
     <p>Choose your strategy:</p>
     <form action="" method="post">
      <input type="radio" name="choice-strategy" id="choice-strategy-long" checked>
      <label for="choice-strategy-long">Long</label>
       <div class="reveal-if-active">
       <label for="which-inputs">Good call. What's the name of your favorite dog?</label>
       <input type="text" id="which-inputs" name="which-inputs" class="require-if-active" data-require-pair="#choice-strategy-long">
       </div>

      <input type="radio" name="choice-strategy" id="choice-strategy-short">
      <label for="choice-strategy-short">Short</label>
       <div class="reveal-if-active">
      <input type="radio" name="choice-strategy" id="choice-strategy-longshort">
      <label for="choice-strategy-longshort">Long and Short</label>
       <div class="reveal-if-active">
 </form>
</html>

Answer 1

你可以试试这个。

    <html>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
     <p>Choose your strategy:</p>
     <form action="" method="post" id="formid">
     <div>
      <input type="radio" name="choice-strategy" id="long" checked>
      <label for="choice-strategy-long">Long</label>
           <div class="long each_text">
                <label for="which-inputs">Good call. What's the name of your favorite dog?</label>
                <input type="text" id="which-inputs" name="long" class="require-if-active" data-require-pair="#choice-strategy-long">
           </div>
      </div>

      <div>
      <input type="radio" name="choice-strategy" id="short">
      <label for="choice-strategy-short">Short</label>
          <div class="hidden short each_text">
                <label for="which-inputs">Short</label>
                <input type="text" id="which-inputs" name="short" class="require-if-active " data-require-pair="#choice-strategy-long">
          </div>
       </div>

       <div>
      <input type="radio" name="choice-strategy" id="longshort">
      <label for="choice-strategy-longshort">Long and Short</label>
          <div class="hidden longshort each_text">
                <label for="which-inputs">Long and Short?</label>
                <input type="text" id="which-inputs" name="longshort" class="require-if-active" data-require-pair="#choice-strategy-long">
           </div>
    </div>
 </form>


 <script type="text/javascript">
$('#formid input[type="radio"]').click(function(){
    $('.each_text').addClass('hidden');
    $('.each_text input').val('');
    var tovisible = $(this).attr('id');
    $('.'+tovisible).removeClass('hidden');

});
</script>

<style type="text/css">
    .hidden{
        display: none;
    }
</style>


</html>

单击模板上的单选按钮

1 个答案: