0

次のことを行う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スキルは限られているので、どんな助け（どこから始めるべきかなど）も大歓迎です.

4

3 に答える 3

2 
$('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();
   }
});
于 2012-07-04T16:59:39.910 に答える
1 
<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 を非表示にする要素に適用します

于 2012-07-04T17:02:36.840 に答える
0

これを試して：

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;
}​

例

于 2012-07-04T17:31:08.397 に答える