Скрыть/показать input Javascript

180

25 апреля 2019, 16:40

Как сделать на JS, чтобы при нажатии на input "Два", input "Скат набок" в блоке Тип кровли был скрыт, а при нажатии input "Один" показан и input "Скат назад" был отмечен checked ?

<form action="" name="theform"> 
  <div>Конструктор гаража 
    <div> 
      <p>Количество автомобилей</p> 
      <input type="radio" checked id="vor1" name="number" value="one"> Один 
      <input type="radio" id="vor2" name="number" value="two"> Два 
    </div> 
    <div> 
      <p>Тип кровли</p> 
      <input type="radio" checked id="crovl1" name="skat" value="skatBack"> Скат назад 
      <input type="radio" id="crovl2" name="skat" value ="twoSkat"> Двускатная 
      <input type="radio" id="crovl3" name="skat" value="skatLeft"> Скат набок 
    </div> 
  </div> 
</form>

Answer 1

document.querySelectorAll("#vor1, #vor2").forEach(function(el) { 
  el.addEventListener("change", function() { 
    if (this.id == 'vor2' && this.checked) { 
      if (document.getElementById("crovl3")) { 
        document.getElementById("crovl3").parentElement.remove(); 
      } 
      document.getElementById("crovl1").checked = true; 
    } 
  }); 
});

<form action="" name="theform"> 
  <div>Конструктор гаража 
    <div> 
      <p>Количество автомобилей</p> 
      <input type="radio" checked id="vor1" name="number" value="one"> Один 
      <input type="radio" id="vor2" name="number" value="two"> Два 
    </div> 
    <div> 
      <p>Тип кровли</p> 
      <input type="radio" checked id="crovl1" name="skat" value="skatBack"> Скат назад 
      <label><input type="radio" id="crovl3" name="skat" value="skatLeft"> Скат набок</label> 
    </div> 
  </div> 
</form>

Обратите внимание, что для корректного удаления текста рядом с input#crovl3, для него был добавлен label.

UPD - отображение и скрытие input#crovl3 "Скат набок" без удаления

document.querySelectorAll("#vor1, #vor2").forEach(function(el) { 
  el.addEventListener("change", function() { 
    if (document.getElementById("vor1").checked) { 
      document.getElementById("crovl3").parentElement.style.display = 'inline-block'; 
    } else if (document.getElementById("vor2").checked) { 
      document.getElementById("crovl3").parentElement.style.display = 'none'; 
      document.getElementById("crovl1").checked = true; 
    } 
  }); 
});

<form action="" name="theform"> 
  <div>Конструктор гаража 
    <div> 
      <p>Количество автомобилей</p> 
      <input type="radio" checked id="vor1" name="number" value="one"> Один 
      <input type="radio" id="vor2" name="number" value="two"> Два 
    </div> 
    <div> 
      <p>Тип кровли</p> 
      <input type="radio" checked id="crovl1" name="skat" value="skatBack"> Скат назад 
      <label><input type="radio" id="crovl3" name="skat" value="skatLeft"> Скат набок</label> 
    </div> 
  </div> 
</form>

Answer 2

Данное решение использует Jquery. Ниже решение вашей задачи:

$('#vor1').on('click',function(){ 
    $('#crovl3').parent().fadeIn(500); 
    $('#vor2').prop('checked',false); 
    $('#crovl1').prop('checked',false); 
}); 
$('#vor2').on('click',function(){ 
    $('#crovl3').parent().fadeOut(500); 
    $('#vor1, #crovl2, #crovl3').prop('checked',false); 
    $('#crovl1').prop('checked',true); 
}); 
$('#crovl1, #crovl2, #crovl3').on('change',function(){ 
    $('#crovl1, #crovl2, #crovl3').prop('checked',false); 
    $(this).prop('checked',true); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<form name="theform"> 
  <div>Конструктор гаража 
    <div> 
      <p>Количество автомобилей</p> 
      <label for="vor1"> 
          <input type="radio" id="vor1" name="number-1" value="one" checked>Один 
      </label> 
      <label for="vor2"> 
           <input type="radio" id="vor2" name="number-2" value="two">Два 
      </label> 
    </div> 
    <div> 
      <p>Тип кровли</p> 
      <label for="crovl1"> 
           <input type="radio" id="crovl1" name="skat-1" value="skatBack" checked>Скат назад 
      </label> 
      <label for="crovl2"> 
          <input type="radio" id="crovl2" name="skat-2" value ="twoSkat">Двускатная 
      </label> 
      <label for="crovl3"> 
           <input type="radio" id="crovl3" name="skat-3" value="skatLeft">Скат набок 
      </label> 
    </div> 
  </div> 
</form>