Javascript 引导如何：选中/选中复选框时，复选框应更改文本输入值

我刚开始使用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>

选择以更改值

现场演示也在进行中

我已经设法做到的是，选中复选框时“折叠”出一个输入字段

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

默认情况下，即加载页面时，它应该具有初始值。选中该复选框时，文本输入的值应该更改（例如，将“value=”Initial value“”更改为“value=”New value“）

不必使用JavaScript就可以做到这一点吗

非常感谢您（通过CSS或JS）提供的任何帮助；-）

可以在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'; 
});

---

没有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');
    }
});

---

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

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

---

jQuery版本：

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

---

那么，当有人在另一个框中键入内容时，您是否希望该框的值发生变化？类似这样的内容：@Yvette:我会记住这一点，谢谢您的澄清。Ryan已经回答了这个问题（我已经标记了有效的解决方案）。哇，你们所有人，你们都很棒；-）我已经使用了带有if/else子句的切换脚本，它工作起来很有魅力，并且完全达到了预期的效果-完美！谢谢你的回答，虽然我使用的是@Ryan的if/else jQuery版本，但它的工作方式是正确的，仍然很好！