Bootstrap How-to：复选框应在选中/选中时更改文本输入值[关闭]

Question

我刚开始使用 HTML/CSS/JavaScript，在测试 Bootstrap 时遇到了一个（希望如此）小障碍。

我的代码：

<div class="form-group">
    <div class="col-sm-2">
        <input type="text" class="form-control" id="text1" name="text1" value="Initial Value" readonly>
    </div>
    <div class="checkbox col-sm-10">
        <label>
            <input type="checkbox" id="checkbox" data-toggle="collapse" data-target="#collapse3rdParty"
                   aria-expanded="false" aria-controls="collapse3rdParty">
            Select to change value
        </label>
    </div>
</div>

<div class="collapse" id="collapse3rdParty">
    <div class="form-group form-group-lowermargin">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="text" class="form-control" id="inputName" name="inputName" placeholder="Name">
        </div>
    </div>
</div>

现场演示也在JSFiddle。

我已经设法实现的是在选中复选框时“折叠”一个输入字段。

我找不到有关如何使同一个复选框更改只读文本输入的值的任何信息（或者我没有得到它）​​。

默认情况下，即在加载页面时，它应该有一个初始值。当复选框被选中时，文本输入的值应该被改变（例如，将 'value="Initial Value"' 更改为 'value="New Value"'）。

这是否可能无需使用 JavaScript？

非常感谢任何有关如何执行此操作的帮助（通过 CSS 或 JS）；-)

Answer 1

您需要使用 javascript。你可以这样做：

document.getElementById('checkbox').onchange = function()  {
  document.getElementById('inputName').setAttribute('placeholder', this.checked ? 'new name' : 'name') 
}

https://jsfiddle.net/d0fyxg8e/

---

jQuery 版本：

$('#checkbox').change(function() {
  $('#inputName').attr('placeholder', this.checked ? 'new name' : 'name') 
})

https://jsfiddle.net/594s2mtf/

Answer 2

没有 JavaScript 就无法更改文本输入的值。以下使用 jQuery 框架，而不是 @Lg102 使用纯 JavaScript 的解决方案。

这将改变输入字段一次：

$('#checkbox').on('change', function(){
    if (this.checked) {
        $('#text1').val('New value');
    }
});

这将根据复选框是否被选中在初始值和新值之间切换：

$('#checkbox').on('change', function(){
    if (this.checked) {
        $('#text1').val('New value');
    } else {
        $('#text1').val('Initial value');
    }
});

Answer 3

可以在 CSS 中通过使用:checked 选择器并结合~ 来完成，但前提是该字段在 DOM 中的复选框之后，所以我不会推荐它。

在（普通的，没有 jQuery）JavaScript 中：

var initial = document.getElementById('text1'),
    checkbox = document.getElementById('checkbox');

checkbox.addEventListener('change', function(){
    initial.value = this.checked ? 'CHECKED' : 'NOT CHECKED'; 
});