使用单选按钮数组的文本框可见性
Textbox visibility by using array of Radiobuttons
我正在创建一组单选按钮来获取有关用户是否患有某种疾病的信息。为此,我正在创建单选按钮数组,其中疾病名称存储在一个数组中,并在单击 add 按钮时检索以根据它们的名称创建单独的单选按钮。
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 在 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>  
<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>
现在,我在这里面临的问题是可见性。当我第一次创建一组控件时,可见性工作正常,就像图像中一样。
但是当我创建另一组控件时意味着我无法更改之前创建的控件的可见性。
我在这里为糖尿病选择了是单选按钮,但文本框仍然隐藏。
请提供解决方案。提前致谢。
只需这样做:
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>
我正在创建一组单选按钮来获取有关用户是否患有某种疾病的信息。为此,我正在创建单选按钮数组,其中疾病名称存储在一个数组中,并在单击 add 按钮时检索以根据它们的名称创建单独的单选按钮。
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 在 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>  
<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>
现在,我在这里面临的问题是可见性。当我第一次创建一组控件时,可见性工作正常,就像图像中一样。
但是当我创建另一组控件时意味着我无法更改之前创建的控件的可见性。
我在这里为糖尿病选择了是单选按钮,但文本框仍然隐藏。
请提供解决方案。提前致谢。
只需这样做:
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>