javascript - 仅当从两个单选按钮中选择某些答案时才需要文本区域

Question

我有两个单选按钮(都是必需的)。所以我需要这样做，当第一个单选按钮设置为"is"时，您必须在文本区域中说明原因，而当第二个单选按钮设置为“否”时，您也必须填写原因。

<h4>Are any of the item(s) missing?</h4>
Yes<input type ="radio" name ="missing" id = "missing1" value = "Yes" required>
No<input type ="radio" name ="missing" id = "missing2" value = "No" >
<div class = "lossnum">
    <h5>How many?</h5>
    <input type="number" name="lossnum" id = "lossnum" placeholder="0">
</div>
<h4>Question 2</h4>

Yes<input type ="radio" name ="putback" id = "putback1" value = "Yes" required>
No<input type ="radio" name ="putback" id = "putback2" value = "No">

我尝试过的一些事情:

仅使用选择按钮时显示的模态(模态从未起作用，所以我放弃了)。

我也尝试过:

$(document).ready(function () {
  $(".lossnum").hide();
    $(".comments").hide();
    $(".returncomments").hide();

    $("#missing1").click(function () {
        $(".lossnum").show();
        $(".comments").show();
        $(".returncomments").show();
    });
    $("#missing2").click(function () {
        $(".lossnum").hide();
        $(".comments").hide();
        $(".returncomments").hide();
    });
     $("#putback2").click(function () {
        $(".comments").show();
        $(".returncomments").show();
    });
    $("#putback1").click(function () {
        $(".comments").hide();
        $(".returncomments").hide();
    });
});

这可以实现它的目的。但这并不是我想要的，因为事情在不应该关闭的时候关闭了，并且文本区域仍然可以被忽略。

Answer 1

第一次隐藏:.lossnum {display:none;}

如果按"is"则显示它:

 $('input[value="Yes]').click(function() {
       $(this).next('.lossnum').show();
 });