Question

我正在尝试创建一个动态表单，用户可以选择上传和映像或嵌入YouTube剪辑。

我使用无线电输入尝试了这个：

<script type="text/javascript">
$(".youtube").change(function () {
    //check if radio button is checked.
    if (this.checked && this.value === "youtube") {
        //show a text box 'embedbode' when radio 'youtube' is checked
        $("#embedcode").show();
    } else if (!this.checked && this.value === "image"){
        //hide the text box when 'image' is checked
        $("#embedcode").hide();
    }

});
</script>

这是html：

<input type="radio" value="image" id="type" name="type" checked='checked' autocomplete="off" />
<label>Image</label>
<input type="radio" value="youtube" id="type" name="type" class="youtube" />
<label>Video</label>
<input id="embedcode" placeholder="embed code" name="embedcode" type="text"/>

默认选择单选按钮image。当我点击视频单选按钮时，会打开一个文本框，我可以输入视频的嵌入代码。但是，当我点击回image时，我是否应该改变我想要上传的内容，嵌入文本框仍然存在。我看了JS，看不出我哪里错了。我尝试调整术语并添加额外的else if但是当我点击返回图像时文本框将无法隐藏。我哪里错了？

Answer 1

<script type="text/javascript">
    $(document).ready(function(){
          $("#embedcode").hide();
          $("input[name='type']").change(function () {
               if($(this).val() == "youtube")
                    $("#embedcode").show();
               else
                    $("#embedcode").hide();
          });
    });
</script>

Answer 2

当他们检查另一个时，你做了（在这里修改你的代码，成为jQuery）：

 if (!$(this).prop('checked') && $(this).val() === "image")

现在检查......所以它不会隐藏它。您需要做的就是检查值，因为他们点击了它并且它是一个收音机，它将始终被检查。

if ($(this).val() === "image")

更简单的方法就是：

$(".youtube").change(function () {
    $("#embedcode").toggle($(this).val() == "youtube");
});

Answer 3

<script type="text/javascript">
$(document).ready(function(){
    $("#embedcode").hide();
    $("input:radio").change(function () {
        if($(this).val() == "youtube")
        {
            $("#embedcode").show();
        }
        else
        {
            $("#embedcode").hide();
        }
    });
});
</script>

单选按钮会在选中时打开文本框，但在取消选中时不会关闭它

3 个答案: