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

我试图将复选框链接到文本输入，以便更新输入字段中的值。 我的问题是，当勾选复选框时，如何相应地更新值。例如，我希望有一个文本说明状态为“待定”（复选框未勾选），一旦勾选该框，将值更新为“已完成”，并可能将文本输入高亮显示为绿色

图片：

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

$('input[name=status]').change(function() {
    var inputText = 'input[name=pending-completed]';
    if($(this).is(':checked')) {
        $(inputText).attr('placeholder', 'Completed').addClass('highlight');
    } else {
        $(inputText).attr('placeholder', 'Pending').removeClass('highlight');
    }
});

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

input.highlight[name=pending-completed]::-webkit-input-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]::-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-ms-input-placeholder {
    color: green;
}

代码：

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

$('input[name=status]').change(function() {
    var inputText = 'input[name=pending-completed]';
    if($(this).is(':checked')) {
        $(inputText).attr('placeholder', 'Completed').addClass('highlight');
    } else {
        $(inputText).attr('placeholder', 'Pending').removeClass('highlight');
    }
});

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

input.highlight[name=pending-completed]::-webkit-input-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]::-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-ms-input-placeholder {
    color: green;
}

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

如果您能在这方面提供帮助，我将不胜感激

谢谢。

尝试以下jquery代码（绑定

.change（）

事件复选框）：-

---

编辑（绿色占位符）：-

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:

---

尝试以下操作：将

更改
事件绑定到复选框，并根据复选框的选中状态放置占位符

$(function(){
 $('#statuses').change(function(){
    var placeholder = $(this).is(':checked')?"Completed":"Pending";

    $("#pending-completed").attr('placeholder',placeholder);

  });
});

现场演示：


jQuery:

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

$('input[name=status]').change(function() {
    var inputText = 'input[name=pending-completed]';
    if($(this).is(':checked')) {
        $(inputText).attr('placeholder', 'Completed').addClass('highlight');
    } else {
        $(inputText).attr('placeholder', 'Pending').removeClass('highlight');
    }
});

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

input.highlight[name=pending-completed]::-webkit-input-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]::-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-ms-input-placeholder {
    color: green;
}

HTML:

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

$('input[name=status]').change(function() {
    var inputText = 'input[name=pending-completed]';
    if($(this).is(':checked')) {
        $(inputText).attr('placeholder', 'Completed').addClass('highlight');
    } else {
        $(inputText).attr('placeholder', 'Pending').removeClass('highlight');
    }
});

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

input.highlight[name=pending-completed]::-webkit-input-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]::-moz-placeholder {
    color: green;
}
input.highlight[name=pending-completed]:-ms-input-placeholder {
    color: green;
}

看看这个。工作示例：

HTML

CSS

谢谢你的帮助。是否有方法更新文本输入中的文本，而不是通过占位符？可能是通过
content
？@Jeiman…是的，您可以使用textbox的值而不是占位符..抱歉，响应太晚，这里有一些internet连接问题，但我需要在jQuery中声明textbox的值，对吗？否则，它将是一个空的输入字段，对吗？@Jeiman…看到这个带有绿色文本颜色的fiddle with.parent（）。它将只看到作为标签的复选框的父项，然后它将看到带有类的标签的同级。挂起完成“…@Jeiman