[英]Make HTML form elements appear (jQuery or JS)
我想知道是否存在執行以下操作的jQuery或JS庫:
根據用戶在A01中輸入的內容,檢查該值,如果該值等於“ x”,則使A01_1可見。 如果沒有,則什么也不做。
<form id="survey">
<fieldset>
<label for="A01">A01</label>
<input type="number" name="A01" id="A01" min="0" max="5" >
<label for="A01_1">A01_1</label>
<input type="text" name="A01_1" id="A01_1" >
我想我正在尋找某種內聯驗證功能,如果與特定輸入匹配,它將使另一個元素可見。 我需要在許多不同的地方應用它,因此我想使其成為可重用的功能。
我的JS技能是有限的,因此非常感謝您提供任何幫助(從哪里開始等)。
$('input[name=A01]').on('keyup', function() {
var val = $.trim( this.value ),
x = 'your_custom_value',
id = this.id,
target = $('label[for='+ id +'_1], input[name='+ id +'_1]');
target.hide();
if( val == x) {
target.show();
}
});
為了重用,您可以更改標記,例如:
<form id="survey">
<fieldset>
<label for="A01">A01</label>
<input type="number" name="A01" id="A01" min="0" max="5" class="myinput">
<label for="A01_1">A01_1</label>
<input type="text" name="A01_1" id="A01_1" >
<label for="A02">A02</label>
<input type="number" name="A02" id="A02" min="0" max="5" class="myinput">
<label for="A02_1">A02_1</label>
<input type="text" name="A02_1" id="A02_1" >
</fieldset>
</form>
並將jQuery更改為:
$('input.myinput').on('keyup', function() {
var val = $.trim( this.value ),
x = 'your_custom_value',
id = this.id,
target = $('label[for^='+ id +'_], input[name='+ id +'_]');
target.hide();
if( val == x) {
target.show();
}
});
<script type="text/javascript">
function checkField(field)
{
if(field.value == 'VALUE')
document.getElementById('A01_1').style.display = 'true';
}
</script>
<input type="number" name="A01" id="A01" min="0" max="5" onchange="checkField(this)">
然后將樣式display:none應用於要隱藏的元素
嘗試這個:
HTML:
<form id="survey">
<fieldset>
<label for="A01">A01</label>
<input data-relation="a01check" type="number" class="checkerinput" name="A01" id="A01" min="0" max="5" >
<label class="noshow a01check" for="A01_1">A01_1</label>
<input class="noshow a01check" type="text" name="A01_1" id="A01_1" >
</fieldset>
</form>
JS:
(function(undefined) {
var equalCheck = 3, $form = $('#survey');
$form.find('input.checkerinput').bind('keyup change', function(event) {
var value = parseInt($(this).val(), 10);
if (!isNaN(value) && value == equalCheck){
var relation = $(this).data('relation');
if (relation != undefined) {
$form.find('.' + relation).removeClass('noshow');
}
}
});
})();
CSS:
.noshow{
display:none;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.