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。

我已经设法实现的目标是“垮掉”＆＃39;选中复选框时的输入字段。

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

默认情况下，即加载页面时，它应具有初始值。当选中复选框时，文本输入的值应该被更改（例如，更改＆＃39;值=＆＃34;初始值＆＃34;＆＃39;到＆＃39;值=＆＃34;新值＆＃34;＆＃39;。）

这是否可以在不使用JavaScript的情况下实现？

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

Answer 1

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

Answer 2

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

这将改变输入字段一次：

$('#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

您需要使用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/

Bootstrap操作方法：复选框应在选中/选中时更改文本输入值

3 个答案: