RadioButton JS не работает с идентификаторами ввода

Question

Идентификаторы ввода при вызове через JS не работают. Мне нужно внести изменения в поля ввода, такие как hide & show, установить свойство ввода в «required» и удалить свойство «required» через идентификаторы, вызываемые в JS при щелчке радиообмена. Я поместил «div» из источника, отредактировал некоторые и придумал это. У меня есть мои полные коды для моей проблемы, поэтому я могу доставить свою проблему понятным образом.

CSS & JS в голове:

<style type="text/css"> 
    .box{ 
      padding: 20px; 
      display: none; 
      margin-top: 20px; 
      border: 1px solid #000; 
     } 

    .red{ background: #ff0000; } 

</style> 

<script type="text/javascript">  
    $(document).ready(function(){ 

      $('input[type="radio"]').click(function(){ 

      if($(this).attr("value")=='red'){ 
         $(".box").hide(); 
         $(".red").show(); 
         $('input[type="text"]').hide(); 
         $('input[type="submit"]').hide(); 
        } 

      if($(this).attr("value")=='rd1'){ 

       var show1 = getElementById('showthis1'); 
       var show2 = getElementById('showthis2'); 
       $('input[type="text"]' + show1).show(); 
       $('input[type="text"]' + show1).attr("required","required"); 

       $('input[type="text"]' + show2).hide(); 
       $('input[type="text"]' + show2).removeAttr("required"); 
       $('input[type="submit"]').show(); 
      } 

      if($(this).attr("value")=='rd2'){ 

       var show1 = getElementById('showthis1'); 
       var show2 = getElementById('showthis2'); 
       $('input[type="text"]' + show1).hide(); 
       $('input[type="text"]' + show1).removeAttr("required"); 

       $('input[type="text"]' + show2).show(); 
       $('input[type="text"]' + show2).attr("required","required"); 
       $('input[type="submit"]').show(); 
      } 
     }); 
    }); 

</script> 

для тела:

<from action=""> 

<label><input type="radio" name = 'selecthere' value="red"> red</label> 
<label><input type="radio" name = 'selecthere' value="rd1"> rad1</label> 
<label><input type="radio" name = 'selecthere' value="rd2"> rad2</label> 

<div class="red box">You have selected <strong>red radio button</strong> so i am here</div> 
     <input type="text" name="here1" id="showthis1" required/> 
     <input type="text" name="here2" id="showthis2" required/>   
     <input type="submit" id="showthis" value="Click"/> 
</form> 

мне нужно реконструировать этот ли? Мне действительно нужна помощь в этом. Любая помощь может добавить мне дополнительную информацию в области разработки страниц. Заранее спасибо.

Answer 1

1.- Вы должны использовать document.getElementById

2.- Для оптимизации использовать код switch

3.- Как вы получаете элементы по ID, а затем их можно передавать в JQuery, вы можете просто передавать их использовать это:

$("#showthis1").hide(); 
$("#showthis1").removeAttr("required"); 

вместо

var show1 = document.getElementById('showthis1'); 
var show2 = document.getElementById('showthis2'); 
$('input[type="text"]' + show1).show(); 
$('input[type="text"]' + show1).attr("required","required"); 

JSFIDDLE DEMO