为什么要使用JavaScript代码是不工作的微软边缘，IE浏览器，UC（移动），Opera Mini的（移动），在Chrome，火狐

Question

我有两个单选按钮的形式

工作（型号：响应&应用）根据选择它显示/隐藏添加部分。代码在少数浏览器上工作。 提前谢谢！

这是一个形式代码：

<form method="post" action="contact.php"> 
 
          <div class="w3-row w3-padding"> 
 
           <label class="w3-col l3 m3 s12" for="email">Email<span class="w3-text-red w3-large">*</span>:</label> 
 
           <div class="w3-col l8 m9 s12"> 
 
            <input type="email" class="w3-input" name="email" id="email" placeholder="Enter your Email ID" required autofocus> 
 
           </div> 
 
          </div> 
 

 
          <div class="w3-row w3-padding"> 
 
           <label class="w3-col l3 m3 s12" for="pwd">Contact<span class="w3-text-red w3-large">*</span>:</label> 
 
           <div class="w3-col l8 m9 s12"> 
 
            <input type="tel" class="w3-input" id="cont" name="contact" placeholder="Enter your Contact number" minlength="10" maxlength="10"required> 
 
           </div> 
 
          </div> 
 

 
          <div class="w3-row w3-padding"> 
 
           <label class="w3-col l3 m3 s12" for="pwd">Messege<span class="w3-text-red w3-large">*</span>:</label> 
 
           <div class="w3-col l8 m9 s12"> 
 
            <textarea class="w3-input" id="msg" name="message" placeholder="Enter your message here" rows="3" cols="3" required></textarea> 
 
           </div> 
 
          </div> 
 

 
          <div class="w3-row w3-padding"> 
 
           <label class="w3-col l3 m3 s12">Type<span class="w3-text-red w3-large">*</span>:</label> 
 
           <div class="w3-col l8 m9 s12 w3-row" style="padding-left: 18px"> 
 
            <input type="radio" name="type1" value="Response" class="w3-radio" id="type2" onclick="document.getElementById('applicationfor').style.display ='none';" checked="" required>Response 
 
            <input type="radio" name="type1" value="Application" class="w3-radio" id="type3" onclick="document.getElementById('applicationfor').style='visibility: visible';" required>Application 
 
           </div> 
 
          </div> 
 
           
 
          <div class="w3-row w3-padding" style="display: none" id="applicationfor"> 
 
           <label class="w3-col l3 m3 s12">Applying for:</label> 
 
           <div class="w3-col l8 m9 s12"> 
 
            <ul> 
 
             <li> 
 
              <label>set 1<span class="w3-text-red w3-large">*</span>:</label><br/> 
 
              <input type="radio" name="set1" value="Subtitle" class="w3-radio" id="r1"> Subtitle Creator (English)<br/> 
 
              <input type="radio" name="set1" value="EngLyr" class="w3-radio" id="r2"> Lyrics Writing (English)<br/> 
 
              <input type="radio" name="set1" value="Set1None" class="w3-radio" id="r3"> None<br/> 
 
             </li> 
 
             <li> 
 
              <label>set 2<span class="w3-text-red w3-large">*</span>:</label><br/> 
 
              <input type="radio" name="set2" value="HinSub" class="w3-radio"> Subtitle Creator (Hindi)<br/> 
 
              <input type="radio" name="set2" value="HinLyr" class="w3-radio"> Lyrics Writing (Hindi)<br/> 
 
              <input type="radio" name="set2" value="Set2None" id="set2val" class="w3-radio"> None<br/> 
 
             </li> 
 
             <h4 style="color: #FF0000" id="raderror"></h4> 
 
             <h4 style="color: #FF0000" id="raderror2"></h4> 
 
             
 
             <li> 
 
              <label>Additional Message:</label> 
 
              <textarea name="additionalmsg" class="w3-input" placeholder="Additional message(optional)" rows="3" cols="8"></textarea> 
 
             </li> 
 
            </ul> 
 
           </div> 
 
          </div> 
 
          <div class="s3 w3-large w3-padding-16 w3-center"> 
 
           <button type="submit" class="w3-btn w3-green w3-hover-text-black">Submit</button> 
 
          </div> 
 
         </form>

Answer 1

没有你的代码，我们将无法确定您的问题。但是在某些情况下，不同的浏览器渲染和行为不同。如果你使用像库一样的jQuery，很容易完成你想要的任务。

$(document).ready(function() { 
    $('input[type=radio][name=type1]').change(function() { 
     if (this.value == 'Response') {//if the value of radio button is male 
      //your code to show the other part 
      $("#Responsediv").show(); 
      $("#Applicationdiv").hide(); 


     } 
     else if (this.value == 'Application') {//if the value of radio button is female 
      //your code to show the other part 
      $("#Responsediv").hide(); 
      $("#Applicationdiv").show(); 
     } 
    }); 
});