javascript - Bootstrap 操作方法 : checkbox should change text input value when selected/checked

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，就不可能更改文本输入的值。以下使用 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');
    }
});