Видимость текстового поля с помощью массива радиобутонов

Question

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

HTML код:

 <div>
 <a href="javascript:void(0);" class="add_button" title="Add field">&nbsp<img style="padding-bottom: 15px;" 
 src="images/add_btn.png"></a>
 </div>

Здесь я использую Javascript для создания кнопки-переключателя при нажатии add .И я также создаю скрытое текстовое поле вместе с элементами управления, которые при выборе Да в радиокнопке видны пользователю на экране.

Javascript для создания элементов управления

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

var values = new Array();
<?php foreach($value as $key => $val){ ?>
    values.push('<?php echo $val; ?>');
<?php } ?>

var maxField = values.length; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var x = 0; //Initial field counter is 1

var fieldHTML = '<div class="field_wrapper"><div class="label-group"><div class="line"></div><label style="font-weight: 900;" id="labelid">Disease</label></div>
<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="Disease" id="inlineRadio1" value="Yes" onclick="javascript:yesnoCheck();"><label class="form-check-label radio-inline" for="inlineRadio1">Yes</label>&nbsp&nbsp
<div id="ifYes" style="visibility:hidden; display:inline-block;"><input type="text" name="dvalue" id="dvalue" placeholder="Value" size="5" style="font-size:11px;"/></div></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="Disease" id="inlineRadio2" value="No" onclick="javascript:yesnoCheck();">&nbsp&nbsp&nbsp&nbsp&nbsp<label class="form-check-label" for="inlineRadio2">No</label>
</div><div class="line"></div></div>'; 

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
         var element=values[x];
         $(wrapper).prepend(fieldHTML); //Add field html
         document.getElementById("labelid").innerText = element;//label
         document.getElementById("inlineRadio1").name = element;//yes radio
         document.getElementById("inlineRadio2").name = element;//no radio
         document.getElementById("dvalue").name = element;//textbox
         x++;//Increment field counter
    }
});

});
</script> 

Javascript для управления видимостью текстового поля

<script type="text/javascript">
function yesnoCheck() 
{
  if (document.getElementById('inlineRadio1').checked) 
  {
     document.getElementById('ifYes').style.visibility = 'visible';
  }
  else 
  {
    document.getElementById('ifYes').style.visibility = 'hidden';
  }

}
</script> 

Теперь проблема, с которой я сталкиваюсь, заключается в видимости.Когда я впервые создаю один набор элементов управления, видимость работает нормально, как на изображении.

Но когда я создаю другой набор средств управления, я не могу изменить видимость ранее созданных элементов управления.

Здесь яЯ выбрал переключатель "Да" для диабета, но текстовое поле все еще скрыто.

Пожалуйста, предоставьте мне решение.Заранее спасибо.

Answer 1

Просто сделайте это:

var values = [ 'Disease', 'Diabetes', 'AIDS', 'Hepatitis', 'Heart Disease', 'Other' ],
    html = '<div class="field_wrapper"><span style="font-weight: 900;">Disease</span>:&nbsp;<select name="Disease" onchange="yesnoCheck( this )"><option value="Yes">Yes</option><option value="No" selected>No</option></select>&nbsp;<input type="hidden" name="dvalue" placeholder="Value" size="5" /></div>',
    x = 0;

function yesnoCheck( el ) {
  var val = ( el.options[ 0 ].selected ) ? 'text' : 'hidden';

  $( el ).next( 'input' ).attr( 'type', val )
}

$( '.add_button' ).on( 'click', function( e ) {
  e.preventDefault();

  if ( x < values.length ) {
    $( '.disease' ).append( html );
    $( '.field_wrapper:last span' ).text( values[ x ] );
    $( '.field_wrapper:last select' ).attr( 'name', values[ x ] );
    x++
  }
} )

.add_button {
    display: block;
    margin: 10px;
    width: 32px;
    height: 32px;
    background: transparent url(https://image.ibb.co/hZbOA8/add_button.png) no-repeat
}
.field_wrapper {
    padding: 10px;
    border-top: 1px solid #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="add_button" title="Add field"></a>
<div class="disease"></div>

Редактировать: Использование Radio buttons вместо Select box:

var values = [ 'Disease', 'Diabetes', 'AIDS', 'Hepatitis', 'HeartDisease', 'Other' ],
    html = '<div class="field_wrapper"><span style="font-weight: 900;">Disease</span>:&nbsp;<label for="inlineRadioNo"><input class="form-check-input" type="radio" name="Disease" id="inlineRadioNo" value="No" onclick="yesnoCheck( this )" checked>No</label>&nbsp;<label for="inlineRadioYes"><input class="form-check-input" type="radio" name="Disease" id="inlineRadioYes" value="Yes" onclick="yesnoCheck( this )">Yes</label><input type="hidden" name="dvalue" placeholder="Value" size="5" /></div>',
    x = 0;

function yesnoCheck( el ) {
  var val = $( el ).val() == 'Yes' ? 'text' : 'hidden';

  $( 'input[placeholder="Value"]' ).eq( $( 'input[type="radio"]:checked' ).index( el ) ).attr( 'type', val )
}

$( '.add_button' ).on( 'click', function( e ) {
  e.preventDefault();

  if ( x < values.length ) {
    $( '.disease' ).append( html );
    $( '.field_wrapper:last span' ).text( values[ x ] );
    $( '.field_wrapper:last label:first' ).attr( 'for', 'inlineRadioNo' + x );
    $( '.field_wrapper:last label:last' ).attr( 'for', 'inlineRadioYes' + x );
    $( '.field_wrapper:last input[value="No"]' ).attr( { id: 'inlineRadioNo' + x, name: 'inlineRadio' + x } );
    $( '.field_wrapper:last input[value="Yes"]' ).attr( { id: 'inlineRadioYes' + x, name: 'inlineRadio' + x } );
    $( '.field_wrapper:last input:last' ).attr( 'name', values[ x ] )
    x++
  }
} )

.add_button {
    display: block;
    margin: 10px;
    width: 32px;
    height: 32px;
    background: transparent url(https://image.ibb.co/hZbOA8/add_button.png) no-repeat
}
.field_wrapper {
    padding: 10px;
    border-top: 1px solid #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="add_button" title="Add field"></a>
<div class="disease"></div>