选中复选框时将输入类型隐藏为文本

Question

我只是想知道在选中复选框按钮时将输入类型从隐藏更改为文本的最佳方法是什么。

我正在寻找这样的东西

   <div class="options">
     <input type="checkbox" checked="">
   </div>

    <form>
        <input type="hidden">
    </form>

然后一个复选框被选中

   <div class="options">
     <input type="checkbox" checked="checked">
   </div>

    <form>
        <input type="text">
    </form>

Answer 1

我这样做是为了好玩：

$(document).ready(function () {
    $("#txt").toggle();
    $("#chk").change(function () {
        $("#txt").toggle();
    });
});

<input type="checkbox" id="chk" />
<input type="text" id="txt" />

我没有将其从隐藏更改为文本，而是切换单个输入元素的可见性。这当然是从隐藏开始的，并且在您选中时变得可见，如果您取消选中则不可见。如果您想要不同的行为，您将需要做一些小工作，但我相信您足够聪明，可以处理它。

祝你好运！！

Answer 2

查看this live jsfiddle

HTML：

<input type="checkbox" class="check1">Show checkbox</input>
<input type="hidden" class="hidden1" value="Some Value" />
<input type="text" class="text1" style="display:none" />

查询：

$(".check1").click(function () {
    if ($('.check1').is(':checked')) {
        $(".text1").val($(".hidden1").val());
        $(".text1").show();
    } else {
        $(".text1").val("");
        $(".text1").hide();
    }
});

---

根据您发布的代码，这就是您要查找的内容：

$('.options input[type='checkbox']').click(function () {
    if ($('.options input[type='checkbox']').is(':checked')) {
        $('form').html("<input type='text'>");
    } else {
        $('form').html("<input type='hidden'>");
    }
});

不过，我不明白你为什么要这样做。你只是想显示和隐藏文本框吗？在这种情况下，你可以写：

$('.options input[type='checkbox']').click(function () {
    $('input[type='text']').toggle();
});