Question

我正在尝试使用jQuery将我的一个输入标签动态复制到另一个输入标签中。换句话说，当用户输入第一个输入时，第二个输入显示用户正在输入的内容（仅在选中复选框时）。

第二个输入应该仅在第一个输入中输入内容并且选中该框时显示

小提琴的链接： https://plnkr.co/edit/GI8jWqh6PbMKO7HVhikP?p=preview

这是我到目前为止所做的：

<body>
  <input type="password" id="firstInput" />
  <input type="hidden" id="secondInput"  />
  <br/>
  <input type="checkbox" id='checkbox'/>

<script>
  $('#checkbox').change(function(){
    if ($(this).prop('checked')) {
        $(secondInput).prop('type', 'text');
        $(firstInput).on('input', function () {
            $(secondInput).val($(firstInput).val());
        });
    } else {
        $(secondInput).prop('type', 'hidden');
    }

  });
</script>

然而，这种工作我面临以下问题：

1.如果我将复选框默认为＆＃34;选中＆＃34;，jQuery将不会看到更改事件，因此如果我开始输入，则第二个输入将不会显示任何内容。

2.当我开始输入时，第二个输入显示出来。如果我删除firstInput中的所有内容，则secondInput将不会被隐藏。

3.与第二个问题类似的问题。如果我将checkbox checked属性默认为false，如果我将其更改为选中，则隐藏的输入会显示，即使我没有输入任何内容。

4.如果我取消选中该复选框，则开始输入内容，如果我将复选框更改为选中，则第二个输入将不会显示我输入的内容，因为之后发生了change（）事件。

指教？

Answer 1

我认为这符合您的要求。

它只为复选框和主输入使用一个事件处理程序

  var $check = $('#4').change(updateSlave),
      $slave = $('#secondInput'),
      $master = $('#firstInput').on('input', updateSlave);


  function updateSlave(){
    var showSlave = $master.val() && $check.is(':checked');
    // not sure about value when hidden
    $slave.prop('type', showSlave ? 'text' : 'hidden').val(showSlave ? $master.val() : '')

  }

的 DEMO

Answer 2

您可以使用事件委派.toggleClass()

var first = $("#firstInput"), second = $("#secondInput");

$(document).on("input", "#firstInput.checked", function() {
  second.val(this.value);
});

$("#4").change(function() {
  var checked = this.checked;
  first.toggleClass("checked", checked);
  second.prop("type", checked ? "text" : "hidden");
});

plnkr https://plnkr.co/edit/KXK5J5IU8bqTZhhqLHIu?p=preview

动态生成从一个输入到另一个输入的值

2 个答案: