如何让我的js函数与锚链接/单选按钮工作

How to get my js function to work with an anchor link / radio button

本文关键字：链接 单选按钮 工作 函数 我的 js      更新时间：2023-09-26

我可以让我的功能工作时，它不是在一个锚标签，我知道如何添加一个onclick事件的链接，但它不工作，然而，当我把它从我的标签，它显示了字母S，我点击它，它工作的权利，但我希望它与我漂亮的单选按钮工作不只是字母S，有什么想法吗?请和谢谢你

            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>

我已经添加了一个代码片段，点击radio button M，你会得到一个输入框列表。

我已经在这一行做了更改，在这里添加了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>

相关文章：