Question

我想在选中复选框时更改我的搜索框的内容。

所以我得到了以下复选框：

<li><label style="margin-left:20px">Bars:  <input type="checkbox"></label><li>
<li><label style="margin-left:20px">Clubs:  <input type="checkbox"></label><li>

这是我的输入字段“Searchbox”

 <input id="pac-input" class="controls form-control" type="text" placeholder="Search Box">

当没有激活复选框时，SearchBox是干净的。

Iam搜索可以在禁用条形图复选框时将复选框的内容更改为条形图，并且我希望在激活俱乐部复选框时将其更改为俱乐部。

Answer 1

如果您想以纯JavaScript方式执行此操作，则可以使用此代码：
HTML：

<li><label style="margin-left:20px">Bars:  <input id="bar" type="checkbox" onclick="updateSearchBox();"></label><li>
<li><label style="margin-left:20px">Clubs:  <input id="club" type="checkbox" onclick="updateSearchBox();"></label><li>
<input id="searchBox" class="controls form-control" type="text" placeholder="Search Box">

JavaScript的：

var barCheckBox = document.getElementById('bar');
var clubCheckBox = document.getElementById('club');
var searchBox = document.getElementById('searchBox');
function updateSearchBox() {
    if (barCheckBox.checked) {
        searchBox.value += ' Bars';
    } else if (clubCheckBox.checked) {
        searchBox.value += ' Clubs';
    } else {
        searchBox.value = '';
    }
}

选中复选框后，更改输入字段的内容

1 个答案: