我正在创建一系列单选按钮,以获取有关用户是否患有某种疾病的信息。为此我创建了一系列单选按钮,其中疾病名称存储在一个数组中,并在单击添加按钮时检索以根据其名称创建单独的单选按钮。
HTML代码:
<div>
<a href="javascript:void(0);" class="add_button" title="Add field"> <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>  
<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();">     <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>
现在,我面临的问题在于可视性。当我第一次创建一组控件时,可见性在图像中工作得很好。
但是当我创建另一组控制手段时,我无法改变先前创建的控件的可见性。
在这里,我为糖尿病选择了是单选按钮,但文本框仍然隐藏。
请给我一个解决方案。在此先感谢。
答案 0 :(得分:2)
只需这样做:
var values = [ 'Disease', 'Diabetes', 'AIDS', 'Hepatitis', 'Heart Disease', 'Other' ],
html = '<div class="field_wrapper"><span style="font-weight: 900;">Disease</span>: <select name="Disease" onchange="yesnoCheck( this )"><option value="Yes">Yes</option><option value="No" selected>No</option></select> <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>: <label for="inlineRadioNo"><input class="form-check-input" type="radio" name="Disease" id="inlineRadioNo" value="No" onclick="yesnoCheck( this )" checked>No</label> <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>