のため、私は3つのラジオボタンを持っているJavaScriptの

Question

追加のテキストフィールドとラジオボタン：

• 手当
• 授業
• 学校

私は手当のラジオボタンをクリックした場合、それが開きますulリスト

は今、手当のためのラジオボタンは、私が「フルでない授業料」のラジオボタンをクリックすると、私はお金のためのテキストフィールドに入力することになっています授業料

のラジオボタンをクリックした後に閉じる必要がありますが、それはその上で閉じます。

「完全な授業料ではない」をクリックした後、それが閉じないようにしたいので、私はMoneyテキストフィールドに値を入力できます。

学校のラジオボタンをクリックすると、これも終了します。

これを動作させるにはどうすればよいですか？

function Allowance(select) { 
 
    if (select.value == 'Allowance') { 
 
    document.getElementById('allowance').style.display = "block"; 
 
    } else { 
 
    document.getElementById('allowance').style.display = "none"; 
 
    } 
 
} 
 

 
function Tuition(select) { 
 
    if (select.value == 'Tuition Fee') { 
 
    document.getElementById('tuition_fee').style.display = "block"; 
 
    } else { 
 
    document.getElementById('tuition_fee').style.display = "none"; 
 
    } 
 
} 
 

 
function Supply(select) { 
 
    if (select.value == 'School Supply') { 
 
    document.getElementById('school_supply').style.display = "block"; 
 
    } else { 
 
    document.getElementById('school_supply').style.display = "none"; 
 
    } 
 
} 
 

 
function Not_Full(select) { 
 
    if (select.value == 'Not Full') { 
 
    document.getElementById('Not_Full').style.display = "block"; 
 
    } else { 
 
    document.getElementById('Not_Full').style.display = "none"; 
 
    } 
 
}

<input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"> Allowance<br> 
 
<div id="allowance" style="display: none;"> 
 
    <ul> 
 
    <li>Food Allowance</li> 
 
    <li>Transportation Allowance</li> 
 
    </ul> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
</div> 
 
<input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"> Tution<br> 
 
<div id="tuition_fee" style="display: none;"> 
 
    <ul> 
 
    <li>Tuition Fee</li> 
 
    <input type="radio" name="test1" value="Full"> Full Tuition Fee<br> 
 
    <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br> 
 
    </ul> 
 
    <div id="Not_Full" style="display: none;"> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
    </div> 
 

 
</div> 
 
<input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"> School 
 
<div id="school_supply" style="display: none;"> 
 
    <ul> 
 
    <li>Books</li> 
 
    <li>Uniform</li> 
 
    </ul> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
</div>

Answer 1

あなたが探していたものを、このですか？私はを理解していませんでした。私は "完全な授業料ではない"をクリックした後に閉じないようにしたいので、Moneyテキストフィールドに値を入力することができます。なぜなら、別のラジオボタンを選択して戻ってきたとしても、マネーフィールドの値はそのままです！私の理解は、入力をクリックしたときに各関数は一度だけ呼び出されるので、それが働いていない

function reset() { 
 
    document.getElementById('allowance').style.display = "none"; 
 
    document.getElementById('tuition_fee').style.display = "none"; 
 
    document.getElementById('school_supply').style.display = "none"; 
 
} 
 

 
function Allowance(select) { 
 
    reset(); 
 
    if (select.value == 'Allowance') { 
 
    document.getElementById('allowance').style.display = "block"; 
 
    } else { 
 
    document.getElementById('allowance').style.display = "none"; 
 
    } 
 
} 
 

 
function Tuition(select) { 
 
    reset(); 
 
    if (select.value == 'Tuition Fee') { 
 
    document.getElementById('tuition_fee').style.display = "block"; 
 
    } else { 
 
    document.getElementById('tuition_fee').style.display = "none"; 
 
    } 
 
} 
 

 
function Supply(select) { 
 
    reset(); 
 
    if (select.value == 'School Supply') { 
 
    document.getElementById('school_supply').style.display = "block"; 
 
    } else { 
 
    document.getElementById('school_supply').style.display = "none"; 
 
    } 
 
} 
 

 
function Not_Full(select) { 
 
    if (select.value == 'Not Full') { 
 
    document.getElementById('Not_Full').style.display = "block"; 
 
    } else { 
 
    document.getElementById('Not_Full').style.display = "none"; 
 
    } 
 
}

<input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"> Allowance<br> 
 
<div id="allowance" style="display: none;"> 
 
    <ul> 
 
    <li>Food Allowance</li> 
 
    <li>Transportation Allowance</li> 
 
    </ul> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
</div> 
 
<input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"> Tution<br> 
 
<div id="tuition_fee" style="display: none;"> 
 
    <ul> 
 
    <li>Tuition Fee</li> 
 
    <input type="radio" name="test1" value="Full"> Full Tuition Fee<br> 
 
    <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br> 
 
    </ul> 
 
    <div id="Not_Full" style="display: none;"> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
    </div> 
 

 
</div> 
 
<input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"> School 
 
<div id="school_supply" style="display: none;"> 
 
    <ul> 
 
    <li>Books</li> 
 
    <li>Uniform</li> 
 
    </ul> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
</div>

Answer 2

間違っているなら、私を修正し 。別のものをクリックすると、表示されているものを非表示にする必要があります。ここで

は変形例である

function expand(element) { 
 
    // collapse all div.expandable 
 
    Array.from(document.getElementsByClassName('expandable')) 
 
    .forEach(function(div) { 
 
     div.style.display = "none"; 
 
    }); 
 

 
    // expand the one coresponding to the clicked input 
 
    document.getElementById(element.id.toLowerCase()).style.display = "block"; 
 
}

li { 
 
    list-style: none; 
 
}

<li> 
 
    <input type="radio" name="ship_need" value="Allowance" id="Allowance" onchange="expand(this)"> 
 
    <label for="Allowance">Allowance</label> 
 
    <div class="expandable" id="allowance" style="display: none;"> 
 
    <ul> 
 
     <li>Food Allowance</li> 
 
     <li>Transportation Allowance</li> 
 
    </ul> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
    </div> 
 
</li> 
 

 
<li> 
 
    <input type="radio" name="ship_need" value="Tuition Fee" id="Tuition" onchange="expand(this)"> 
 
    <label for="Tuition">Tuition</label> 
 
    <div class="expandable" id="tuition" style="display: none;"> 
 
    <ul> 
 
     <li>Tuition Fee</li> 
 
     <input type="radio" name="test1" value="Full"> Full Tuition Fee<br> 
 
     <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br> 
 
    </ul> 
 
    <div id="Not_Full" style="display: none;"> 
 
     <label class="control-label">Money:</label> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
</li> 
 

 
<li> 
 
    <input type="radio" name="ship_need" value="School Supply" id="School" onchange="expand(this)"> 
 
    <label for="School">School</label> 
 
    <div class="expandable" id="school" style="display: none;"> 
 
    <ul> 
 
     <li>Books</li> 
 
     <li>Uniform</li> 
 
    </ul> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
    </div> 
 
</li>