Каков наилучший способ скрыть / показать несколько текстовых полей в разных группах форм с переключателями?

Question

У меня есть форма с несколькими группами форм, в каждой из которых есть переключатели «да» и «нет», каждая группа форм - это отдельный вопрос. Когда пользователь выбирает «да», он отображает текстовое поле, которое пользователь должен заполнить своим ответом. , Я нашел следующее решение:

function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvtext = document.getElementById("dvtext");
        dvtext.style.display = chkYes.checked ? "block" : "none";
    }

<label for="chkYes">
    <input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />
    No
</label>
<div id="dvtext" style="display: none">
    Text Box:
    <input type="text" id="txtBox" />
</div>

Но Javascript работает только с идентификаторами, так что это будет означать, что мне нужно будет снова добавить функцию с новым идентификатором для каждой отдельной группы форм для отображения каждое другое текстовое поле. Есть лучший способ сделать это? Есть ли что-то, что я мог бы использовать для отображения текстовых полей каждый раз, когда пользователь нажимает переключатель «да» в каждой отдельной группе форм.

Answer 1

Очень просто с jQuery

$(document).ready(function(){

    $('input[name="chk"]').change(function(){
        if($(this).val() == 'yes'){
          $('#dvtext').show();
        }else{
          $('#dvtext').hide();
        }
    });
 
});

 
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <label for="chkYes">
    <input type="radio" name="chk" value="yes" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" name="chk" value="no" />
    No
</label>
<div id="dvtext" style="display: none">
    Text Box:
    <input type="text" id="txtBox" />
</div>


  

Answer 2

Вам не нужно добавлять несколько функций, вы можете достичь этого, используя одну функцию с аргументом вроде:

function ShowHideDiv(formgrouppno) {
  var chkYes = document.getElementById("chkYes" + formgrouppno);
  var dvtext = document.getElementById("dvtext" + formgrouppno);
  dvtext.style.display = chkYes.checked ? "block" : "none";
}

<h3>Form grp 1</h3>
<label for="chkYes1">
    <input type="radio" id="chkYes1" name="chk1" onclick="ShowHideDiv(1)" />
    Yes
</label>
<label for="chkNo1">
    <input type="radio" id="chkNo1" name="chk1" onclick="ShowHideDiv(1)" />
    No
</label>
<div id="dvtext1" style="display: none">
  Text Box 1:
  <input type="text" id="txtBox1" name="txtbox1" />
</div><br/>
<hr/>


<h3>Form grp 2</h3>
<label for="chkYes">
    <input type="radio" id="chkYes2" name="chk2" onclick="ShowHideDiv(2)" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo2" name="chk2" onclick="ShowHideDiv(2)" />
    No
</label>
<div id="dvtext2" style="display: none">
  Text Box 2:
  <input type="text" id="txtBox2" name="txtbox2" />
</div><br/>
<hr/>

<h3>Form grp 2</h3>
<label for="chkYes">
    <input type="radio" id="chkYes3" name="chk3" onclick="ShowHideDiv(3)" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo3" name="chk3" onclick="ShowHideDiv(3)" />
    No
</label>
<div id="dvtext3" style="display: none">
  Text Box 3:
  <input type="text" id="txtBox3" name="txtbox3" />
</div><br/>
<hr/>

Примечание: Вы можете добавить столько текстовых полей, и все они будут обрабатываться только одной javascript функцией. Внимательно посмотрите, как я определил функции onclick, атрибуты name и id для переключателей и как они будут использоваться в функции javascript.

Это использует чистый javascript, но если вы используете jquery, чем это будет легче, я надеюсь, что это может помочь.

Answer 3

<script type="text/javascript">
  function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
      document.getElementById('ifYes').style.display = 'block';
    } else document.getElementById('ifYes').style.display = 'none';

  }
</script>
<label for='yesCheck'>Yes</label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label for='noCheck'>No</label><input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>

<div id="ifYes" style="display:none">
Text box:
<input type='text' id='yes' name='yes'><br>
</div>