-1

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

我正在寻找这样的东西

   <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>
4

2 回答 2

2

我这样做是为了好玩：

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

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

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

祝你好运！！

于 2013-03-24T00:10:47.450 回答
0

看看这个现场 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();
});
于 2013-03-23T23:59:53.130 回答