选中复选框时，将隐藏的输入类型更改为文本

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

看看这个现场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" />

JQUERY：

$(".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();
});