js関数をアンカーリンク/ラジオボタンで操作する方法

Question

アンカータグの中にないときに私の機能を動作させることができますが、onclickイベントをリンクに追加する方法はわかっていますが、私はそれを取るとき私のラベルそれは文字Sを表示し、私はそれが正常に動作しますが、私はそれが私のかなりのラジオボタンだけでなく、任意のアイデアと一緒に動作したいですか？私はあなたが入力ボックスのリストを取得しますradio button M上のコードスニペットのクリックを追加しているあなたに

  function displayForm(c){ 
 
       if(c.value.includes("youth")){ 
 
        document.getElementById("adult").style.visibility='visible'; 
 
        document.getElementById("youth").style.visibility='hidden'; 
 
       } 
 
       else if(c.value.includes("ladies")){ 
 
        document.getElementById("adult").style.visibility='hidden'; 
 
        document.getElementById("youth").style.visibility='visible'; 
 
       } 
 
       else if(c.value.includes("adult")){ 
 
        document.getElementById("adult").style.visibility='hidden'; 
 
        document.getElementById("youth").style.visibility='visible';} 
 
       else{ 
 
       } 
 
      
 
      }   
 

  
 
     
 
    <div class="sizes"> 
 
     <h3>Available sizes</h3> 
 
     <hr> 
 
     <h4>Youth Sizes</h4> 
 
      <%size_price.each do |item| %> 
 
      <%if item['size'] == "youth small" %> 
 
      <label for="<%=item['size']%>"> 
 
              S 
 
      <input type="radio" id="<%=item['size']%>" name="size" value="youth small" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)"> 
 
      </label> 
 
      <%elsif item['size'] == "youth medium" %> 
 
      <label for="<%=item['size']%>"> 
 
     <a href="#">M</a> 
 
      <input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>"> 
 
      </label> 
 
. 
 

 
     <p style="visibility:hidden" id="adult"> 
 
     Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > 
 
         <br> 
 
     Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> 
 
         <br> 
 
     Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> 
 
         <br> 
 
     Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> 
 
         </p> 
 
         
 
         <p style="visibility:hidden" id="youth"> 
 
    Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > 
 
         <br> 
 
    Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> 
 
         <br> 
 
    Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> 
 
         <br> 
 
    Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> 
 
         </p>

Answer 1

に感謝してください。

私はここにonclickイベントを追加したこの行に変更を加えました。

<input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)"> 

 function displayForm(c){ 
 
      if(c.value.includes("youth")){ 
 
       document.getElementById("adult").style.visibility='visible'; 
 
       document.getElementById("youth").style.visibility='hidden'; 
 
      } 
 
      else if(c.value.includes("ladies")){ 
 
       document.getElementById("adult").style.visibility='hidden'; 
 
       document.getElementById("youth").style.visibility='visible'; 
 
      } 
 
      else if(c.value.includes("adult")){ 
 
       document.getElementById("adult").style.visibility='hidden'; 
 
       document.getElementById("youth").style.visibility='visible';} 
 
      else{ 
 
      } 
 

 
     } 

<div class="sizes"> 
 
    <h3>Available sizes</h3> 
 
    <hr></hr> 
 
    <h4>Youth Sizes</h4> 
 
     <%size_price.each do |item| %> 
 
     <%if item['size'] = "youth small" %> 
 
     <label for="<%=item['size']%>"> 
 
             S 
 
     <input type="radio" id="<%=item['size']%>" name="size" value="youth small" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)"> 
 
     </label> 
 
     <%elsif item['size'] = "youth medium" %> 
 
     <label for="<%=item['size']%>"> 
 
    <a href="#">M</a> 
 
     <input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)"> 
 
     </label> 
 
      <p style="visibility:hidden" id="adult"> 
 
    Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > 
 
        <br> 
 
    Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> 
 
        <br> 
 
    Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> 
 
        <br> 
 
    Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> 
 
        </p> 
 

 
        <p style="visibility:hidden" id="youth"> 
 
Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > 
 
        <br> 
 
Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> 
 
        <br> 
 
Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> 
 
        <br> 
 
Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> 
 
        </p>