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

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

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

2 个答案: