javascript - 将复选框链接到文本输入并更新其字段

Question

我正在尝试将复选框链接到文本输入，以便更新输入字段内的值。 我的问题是当复选框被选中时如何相应地更新值。例如，我希望有一个文本说明状态为“待处理”(复选框未选中)，一旦选中该框，将值更新为“已完成”，并可能将文本输入突出显示为绿色。

图片:

代码:

    <div class="status-updates">
        <label class="radio" for="status-updates">
            <input type="checkbox" name="status" id="statuses">
        </label>
        <input type="text" name="pending-completed" id="pending-completed" class="pending-completed" placeholder="Pending">
    </div>

我需要某种 jQuery 来运行某种输入验证吗？

希望得到一些帮助。

谢谢。

Answer 1

尝试下面的 jquery 代码(绑定(bind)复选框的 .change() 事件):-

$('#statuses').change(function(){
  if($(this).is(':checked'))
  {
    $("#pending-completed").attr('placeholder','Completed')
  }
  else
  {
    $("#pending-completed").attr('placeholder','Pending')
  }
});

<小时/>

编辑(绿色占位符):-

Jquery:

$('#statuses').change(function(){
  if($(this).is(':checked'))
  {
    $("#pending-completed").attr('placeholder','Completed').addClass('green-class')
  }
  else
  {
    $("#pending-completed").attr('placeholder','Pending').removeClass('green-class')
  }
});

CSS:

.green-class::-webkit-input-placeholder {
  color: green;
}

DEMO