2016-10-04 8 views
0

2つのラジオボタンがあり、それぞれフォーム上の異なる入力を切り替えます。私はhide()を使用するonclick()関数を使用してこれを実現しましたが、これは、ユーザが前後に切り替えた場合に、要素を戻すために複製された.show()という別の関数を必要とします。それほど冗長ではない、より良いロジックがなければならないと思っています。フォーム入力を変更するラジオボタン

とにかくこれは私が持っているものです。

<labe>  
    <input type="radio" name="radioReason" onClick="resetPassShow()"> </input 
     <span class="text">Request profile update (i.e. phone#)</span> 
</label> 

<label> 
    <input type="radio" name="radioReason" value="resetPassword" onClick="resetPassRemove;"> </input> 
    <span class="text">Reset Password or Unlock My Account</span> 
</label> 

function resetPassRemove(){ 
    $("#prodCategoryLabel").hide(); 
    .... 
} 

function resetPassShow(){ 
    $("#prodCategoryLabel").show(); 
    .... 
} 
+0

あなたの投稿HTMLコードが台無しです。それをきれいにしてください –

答えて

1

JSフィドルはアクションである:https://jsfiddle.net/dv5xmw9z/1/

JS

function hideA(x) { 
    if (x.checked) { 
    document.getElementById("A").style.visibility = "hidden"; 
    document.getElementById("B").style.visibility = "visible"; 
    } 
} 

function hideB(x) { 
    if (x.checked) { 
    document.getElementById("B").style.visibility = "hidden"; 
    document.getElementById("A").style.visibility = "visible"; 
    } 
} 

HTML

<input type="radio" onchange="hideB(this)" name="aorb" checked>A | 
<input type="radio" onchange="hideA(this)" name="aorb">B 
<div id="A"> 
    <br/>A's text</div> 
<div id="B" style="visibility:hidden"> 
    <br/>B's text 
</div> 
関連する問題