使用Radiobuttons数组的文本框可见性

时间:2018-06-11 11:00:24

标签: javascript php laravel laravel-5.2

我正在创建一系列单选按钮,以获取有关用户是否患有某种疾病的信息。为此我创建了一系列单选按钮,其中疾病名称存储在一个数组中,并在单击添加按钮时检索以根据其名称创建单独的单选按钮。

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在添加按钮点击上创建单选按钮。我还创建了一个隐藏的文本框以及控件,在无线电按钮中选择是,它在屏幕上对用户可见。

用于创建控件的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> 

现在,我面临的问题在于可视性。当我第一次创建一组控件时,可见性在图像中工作得很好。

Step 1

Step 2

但是当我创建另一组控制手段时,我无法改变先前创建的控件的可见性。

Step 3

在这里,我为糖尿病选择了是单选按钮,但文本框仍然隐藏。

请给我一个解决方案。在此先感谢。

1 个答案:

答案 0 :(得分:2)

只需这样做:

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>