選擇單選按鈕時顯示的文本框

Question

我希望在選擇單選按鈕時出現一個文本框。 這就是我的代碼的樣子；

Care of Address? <br>
Yes<input type="radio" name="radio1" value="Yes" onClick="getResults(this)">
No<input type="radio" name="radio1" value="No" onclick="getResults(this)">

<div class="text"><p>Address Line 1  <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3  <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode  <input type="text" name="text5" id="text5" maxlength="30"></p></div>

<script> 
    (document).ready(function() {
        (".text").hide()

    });
    function getResults(elem) {
        elem.checked && elem.value == "Yes" ? (".text").show() : (".text").hide();
    };
    </script>

誰能幫我

阿比

Answer 1

嘗試這個：

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

 <label for="chkYes"> <input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" /> Yes </label> <label for="chkNo"> <input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" /> No </label> <div id="dvtext" style="display: none"> Text Box: <input type="text" id="txtBox" /> </div>

Answer 2

你甚至不需要 JavaScript ，更不用說 JQuery 或 Vue

 #dvtext { display: none; } #chkYes:checked ~ #dvtext { display: block; }

 <input type="radio" id="chkYes" name="chk" /> <label for="chkYes">Yes</label> <input type="radio" id="chkNo" name="chk" /> <label for="chkNo">No</label> <div id="dvtext"> Text Box: <input type="text" id="txtBox" /> </div>

Answer 3

您似乎錯過了在（文檔）和（.text）之前添加$。 請添加 $ 並查看它是否有效。 所以你的腳本會變得像

<script> 
$(document).ready(function() {
    $(".text").hide();

});
function getResults(elem) {
    elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>

希望這可以幫助。

Answer 4

jquery

$('.no, .yes').click(function() {
   if($('.no').is(':checked')) {
     $('.adrs').hide();
    }
    if ($('.yes').is(':checked')){
         $('.adrs').show();
    }
});

我將 class yes 添加到 yes 單選按鈕，no 添加到 no 單選按鈕。 此外，我將 class 廣告添加到作為地址的文本字段中。 然后基於我隱藏地址或顯示它的類

密碼筆

Answer 5

這就是你應該做的

div.text{display:none} 轉交地址？

是 否

<div class="text"><p>Address Line 1  <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3  <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode  <input type="text" name="text5" id="text5" maxlength="30"></p></div>

<script> 
    function getResults(elem) {

        elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
    };
    </script>

https://jsfiddle.net/2w0zf887/

Answer 6

這是給你的小提琴https://jsfiddle.net/Simplybj/mjLwusut/4/

您可以通過將單選按鈕與這樣的單擊事件綁定來實現此目的

$('#rdYes').on('click', function() {
  $(".text").show();
});

$('#rdNo').on('click', function() {
  $(".text").hide();
});

這是你的 HTML。 最好用 label 標簽包裝輸入類型。 而且，如果您要先隱藏元素，然后嘗試在 DOM 渲染上隱藏，而不是在 DOM 准備好防止閃爍之后

Care of Address?
<br>
<label for="rdYes">Yes</label>

<input id="rdYes" type="radio" name="radio1" value="Yes" onClick="getResults(this)">
<label for="rdNo">No</label>
<input id="rdNo" type="radio" name="radio1" value="No" onclick="getResults(this)" checked="checked">
<div class="text" style="display:none;">
  <p>Address Line 1
    <input type="text" name="text1" id="text1" maxlength="30">
  </p>
</div>