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

试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您似乎错过了添加$ before（文档）以及之前（.text）。请添加$并查看它是否有效。所以你的脚本会变得像

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

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

希望这有帮助。

Answer 3

jquery

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

我在yes单选按钮上添加了yes类，在no单选按钮上添加了no。 Alos我将类adrs添加到地址的文本字段中。然后基于隐藏地址或显示地址的类

Codepen

Answer 4

你应该做什么

div.text {显示：无}          关心地址？

    是     否

<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 5

这是你的小提琴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>

Answer 6

您甚至不需要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>

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

6 个答案: