jqueryで入力タイプ番号のフィールドデータに基づいて別のフィールドを表示するにはどうすればよいですか？

Question

私は表示しないようにしています。子供のフィールドデータに基づいて提出された子供の年齢の。既定では、この子供はcssで隠されたボックスの年齢になります。いいえを表示したい。子供filed.Howに与えられたデータに基づいて、子の年齢ボックスの私はjQueryを使ってこれを行うことができますか？任意の提案は私に有用なはずである

年齢フィールドの

1）コードの子フィールドの

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types"> 
<label for="yith-wcbk-booking-persons-type-390"> 
    Child</label> 
<input id="yith-wcbk-booking-persons-type-390" name="person_types[390]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="4" data-person-type-id="390" value="" type="number"> 
</div> 

は

2）コード（第一ageフィールド）

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types"> 
<label for="yith-wcbk-booking-persons-type-450"> 
    1st age</label> 
<input id="yith-wcbk-booking-persons-type-450" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number"> 
</div> 

3）が、これはJSそれは

jQuery('#yith-wcbk-booking-persons-type-390').change(function(){ 
    if(jQuery(this).val() === '1') { 
     jQuery('#yith-wcbk-booking-persons-type-450').show(); 
    } 
    if(jQuery(this).val() === '2') { 
     jQuery('#yith-wcbk-booking-persons-type-450').show(); 
     jQuery('#yith-wcbk-booking-persons-type-451').show(); 
    } 
    if(jQuery(this).val() === '3') { 
     jQuery('#yith-wcbk-booking-persons-type-450').show(); 
     jQuery('#yith-wcbk-booking-persons-type-451').show(); 
     jQuery('#yith-wcbk-booking-persons-type-452').show(); 
    } 
    if(jQuery(this).val() === '4') { 
     jQuery('#yith-wcbk-booking-persons-type-450').show(); 
     jQuery('#yith-wcbk-booking-persons-type-451').show(); 
     jQuery('#yith-wcbk-booking-persons-type-452').show(); 
     jQuery('#yith-wcbk-booking-persons-type-453').show(); 
    } 
}); 

に動作しませんでした使用されますは

Answer 1

こんにちは再びここに正しいコードだ、それが正常に動作します リンクです https://jsfiddle.net/Liamm12/vya8vtt1/2/

HTML

この

<input id="yith-wcbk-booking-persons-type-389" name="person_types[389]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="1" max="4" data-person-type-id="389" value="0" type="number"> 

のような主要な入力

value="0" 

は、必要があります：コーディングハッピー

CS S

#yith-wcbk-booking-persons-type-450{ 
    display: none; 
    } 
#yith-wcbk-booking-persons-type-451{ 
    display: none; 
    } 
#yith-wcbk-booking-persons-type-452{ 
    display: none; 
    } 
#yith-wcbk-booking-persons-type-453{ 
    display: none; 
    } 

jQueryのこれがないJS何

$(function() { 

$('#yith-wcbk-booking-persons-type-389').change(function() { 

var input = $('#yith-wcbk-booking-persons-type-389').val(); 

     if (input == "1") { 
        $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').hide(); 
     $('#yith-wcbk-booking-persons-type-452').hide(); 
     $('#yith-wcbk-booking-persons-type-453').hide(); 
    }else if (input == "2"){ 
     $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').show(); 
     $('#yith-wcbk-booking-persons-type-452').hide(); 
     $('#yith-wcbk-booking-persons-type-453').hide(); 
    }else if (input == "3"){ 
     $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').show(); 
     $('#yith-wcbk-booking-persons-type-452').show(); 
     $('#yith-wcbk-booking-persons-type-453').hide(); 
    }else if (input == "4"){ 
     $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').show(); 
     $('#yith-wcbk-booking-persons-type-452').show(); 
     $('#yith-wcbk-booking-persons-type-453').show(); 
    } 

}); 
}); 

Answer 2

<script type="text/javascript" language="javascript"> 
    $(function() { 
     $('.small-age').val("4"); 
     $('.medium-age').val("12"); 
    }); 
</script> 
<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types"> 
<label for="yith-wcbk-booking-persons-type-450"> 
    1st age</label> 
<input id="yith-wcbk-booking-persons-type-450" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number"> 
</div> 
<div class="medium-age yith-wcbk-form-section yith-wcbk-form-section-person-types"> 
<label for="yith-wcbk-booking-persons-type-390"> 
    Child</label> 
<input id="yith-wcbk-booking-persons-type-390" name="person_types[390]" class="small-age yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="4" data-person-type-id="390" value="" type="number"> 
</div> 

Answer 3

ピュアjsのアプローチ

document.getElementById("create").onclick = createBoxes; 
 

 
function createBoxes() { 
 
    let childNums = document.getElementById("childNum").value; 
 
    console.log("childNums",childNums) 
 
    for(i=1; i<=childNums ; i++) { 
 
    let inputEl = document.createElement("input"); 
 
    inputEl.setAttribute('type', 'number'); 
 
    inputEl.setAttribute('placeholder', 'Set Age for Child'+i); 
 
    inputEl.setAttribute('id', 'child'+i); 
 
    let label = document.createElement("label"); 
 
    let labelTxt = document.createTextNode("Age of child"+i); 
 
    label.setAttribute("for","child"+i); 
 
    label.appendChild(labelTxt); 
 
    document.getElementById('boxes').appendChild(inputEl) 
 
    inputEl.parentNode.insertBefore(label, inputEl.nextSibling); 
 
    let linebreak = document.createElement("br"); 
 
    inputEl.parentNode.insertBefore(linebreak, label.nextSibling); 
 
    } 
 
}

<input type="number" id="childNum" placeholder = "enter number of childs" /> 
 
<button id="create"> Create age boxes</button> 
 
<div id="boxes"> 
 
</div>

Answer 4

最初の方法...ワードプレスで罰金ではなく、作品の作品： -

$('#industry').on('change',function(){ 
 
    var selection = $(this).val(); 
 
    console.log("Detected change..." + selection); 
 
    $("#SaaSMeetings").toggle($(this).val()=="age"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<label for="">child</label> 
 
    <select id="industry"> 
 
     <option value="Telesales">Select</option> 
 
     <option value="age">1</option> 
 
    </select> 
 
<!-- Show Metric Input based on Industry Selection --> 
 
<input id="SaaSMeetings" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number" style="display:none">

私はこのコンセプトをhereに使用しています。あなたのために解決策があれば、javascriptをチェックしてください。

<script type="text/javascript"> 
    $('#attribute_369').change(function(){ 
     if($(this).val() == '435'){ 
      $('.productView-options .form-field:nth-child(2)').hide(); 
      $('.productView-options .form-field:nth-child(3)').show(); 
     }else if($(this).val() == '436'){ 
      $('.productView-options .form-field:nth-child(3)').hide(); 
      $('.productView-options .form-field:nth-child(2)').show(); 
     }else if($(this).val() == '434'){ 
      $('.productView-options .form-field:nth-child(3)').hide(); 
      $('.productView-options .form-field:nth-child(2)').hide(); 
     } 

    }); 
</script> 

<style> 


.productView-options .form-field:nth-child(2) { 
    display: none; 
} 

.productView-options .form-field:nth-child(3) { 
    display: none; 
} 
</style> 

Answer 5

は、私はあなたが「アクティブ」という名前の新しいクラスを作成し、表示ブロックを置くことを好みます。

：

.active{ 
      display: block; 
     } 
#yith-wcbk-booking-persons-type-450{ 
    display: none; 
    } 
#yith-wcbk-booking-persons-type-451{ 
    display: none; 
    } 
#yith-wcbk-booking-persons-type-452{ 
    display: none; 
    } 
#yith-wcbk-booking-persons-type-453{ 
    display: none; 
    } 

が続いてjQueryので show()のinistedこのコードのようにこれが動作するコードは、あなたが私が思うこの jQuery snippetを試すことができます。この

jQuery('#yith-wcbk-booking-persons-type-390').change(function(){ 
    if(jQuery(this).val() === '1') { 
     jQuery('#yith-wcbk-booking-persons-type-450').addClass('active'); 
    } 
    if(jQuery(this).val() === '2') { 
     jQuery('#yith-wcbk-booking-persons-type-450').addClass('active'); 
     jQuery('#yith-wcbk-booking-persons-type-451').addClass('active'); 
    } 
    if(jQuery(this).val() === '3') { 
     jQuery('#yith-wcbk-booking-persons-type-450').addClass('active'); 
     jQuery('#yith-wcbk-booking-persons-type-451').addClass('active'); 
     jQuery('#yith-wcbk-booking-persons-type-452').addClass('active'); 
    } 
    if(jQuery(this).val() === '4') { 
     jQuery('#yith-wcbk-booking-persons-type-450').addClass('active'); 
     jQuery('#yith-wcbk-booking-persons-type-451').addClass('active'); 
     jQuery('#yith-wcbk-booking-persons-type-452').addClass('active'); 
     jQuery('#yith-wcbk-booking-persons-type-453').addClass('active'); 
    } 
}); 

Answer 6

のようになりますaddClass('active')

を使用Not：まずは使用する必要はありませんjQueryあなただけvariable.

var $ = jQuery 

$('#yith-wcbk-booking-persons-type-390').change(function(){ 

    var tVal = parseInt($(this).val()); 
    if(tVal == '1') { 
     $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').hide(); 
     $('#yith-wcbk-booking-persons-type-452').hide(); 
     $('#yith-wcbk-booking-persons-type-453').hide(); 
    }else if(tVal == '2') { 
     $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').show(); 
     $('#yith-wcbk-booking-persons-type-452').hide(); 
     $('#yith-wcbk-booking-persons-type-453').hide(); 
    }else if(tVal == '3') { 
     $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').show(); 
     $('#yith-wcbk-booking-persons-type-452').show(); 
     $('#yith-wcbk-booking-persons-type-453').hide(); 
    }else if(tVal == '4') { 
     $('#yith-wcbk-booking-persons-type-450').show(); 
     $('#yith-wcbk-booking-persons-type-451').show(); 
     $('#yith-wcbk-booking-persons-type-452').show(); 
     $('#yith-wcbk-booking-persons-type-453').show(); 
    } 
}); 

としてそれを定義することができ、すべての時間が、これは役立ちました願っています。

Answer 7

こんにちは@Abheeこれはjqueryを使用する私の非常に簡単で簡単なソリューションです。チェックアウトしてください。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Testin script</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div> 
    <label> 
     Child</label> 
    <input value="1" type="number" onchange="update_child(this);"> 
    </div> 

    <div id="childs"> 
    <label>1 child</label> 
    <input value="" type="number"> 
    </div> 

    <script type="text/javascript"> 
    function update_child(me){ 
     var num_child = $(me)[0].value; 
     var child = ""; 
     for(var i=0;i<num_child;i++){ 
     child += '<label>'+(i+1)+' child</label><input value="" type="number"><br>'; 
     } 
     $("#childs")[0].innerHTML = child; 
    } 
    </script> 
</body> 
</html> 

希望します。ここでD