Question

我有两个单选按钮。选择一个我要显示两个文本框和一个按钮，并选择另一个单选按钮，我想显示一个文本框和一个按钮。请帮助我，因为我是Javascript的新手。

这是我的代码：

＆＃13;

   

 function ShowHideDiv() {
            var chkYes = document.getElementById("chkYes");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = chkYes.checked ? "block" : "none";
        }

＆＃13;

             

  

 .lgntxt {
					font-family: 'Open Sans', sans-serif;
					font-size:12px;
					font-weight:400;
					height:20px;
					padding-left:20px;
					
				}

＆＃13;

   

   

              <label for="chkYes">
                <input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
                I am new on Swadonline
            </label>
            <br>
            <label for="chkYes">
                <input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
                I already have a Swadonline account
            </label>
            <br>
            <br>
            <div id="dvtext" style="display: none" class="lgntxt">
                Please enter your Email Address *
                <br>
                <input type="text" id="txtBox" />
            </div>

＆＃13;

Answer 1

单选按钮的ID应该是整个页面中唯一的。并且还使用＆＃34; onchange＆＃34;单选按钮的事件而不是onclick。从技术上讲，你可以使用onclick事件！你可以看到这个link

Answer 2

   

 function ShowHideDiv() {
            var chkYes1 = document.getElementById("chkYes1");
            var dvtext1 = document.getElementById("dvtext1");
var chkYes2 = document.getElementById("chkYes2");
            var dvtext2 = document.getElementById("dvtext2");
            var button = document.getElementById("button");
            dvtext1.style.display = chkYes1.checked||chkYes2.checked ? "block" : "none";

            dvtext2.style.display = chkYes2.checked ? "block" : "none";

button.style.display = chkYes1.checked || chkYes2.checked ? "block" : "none";
        }

             

  

 .lgntxt {
					font-family: 'Open Sans', sans-serif;
					font-size:12px;
					font-weight:400;
					height:20px;
					padding-left:20px;
					
				}

   

   

              <label for="chkYes1">
                <input type="radio" id="chkYes1" name="chk" onclick="ShowHideDiv()" checked />
                I am new on Swadonline
            </label>
            <br>
            <label for="chkYes2">
                <input type="radio" id="chkYes2" name="chk" onclick="ShowHideDiv()" />
                I already have a Swadonline account
            </label>
            <br>
            <br>
            <div id="dvtext1"  class="lgntxt">
                text box 1
                <br>
                <input type="text" id="txtBox" />
            </div>
            <div id="dvtext2" class="lgntxt" style="display: none">
                text box 2
                <br>
                <input type="text" id="txtBox" />
            </div>
            <button  id="button">button</button>

选择单选按钮时显示文本框/按钮

2 个答案: