当checkBox被选中时更改输入字段的内容

我想在选中复选框时更改我的搜索框的内容。当checkBox被选中时更改输入字段的内容

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

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

这是我的输入栏“搜索框”

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

如果没有复选框被激活搜索框是干净的。

Iam寻找一种可能性，当Bars复选框被激活时，我可以将复选框的内容更改为Bars，并且当激活Clubs复选框时我想将其更改为Clubs。

来源

2017-05-07 ChristopherG1994

，如果你想这样做的纯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 = ''; 
    } 
}

来源

2017-05-07 13:51:34

我试过你的方式，它的工作原理，非常感谢。但是，如果在搜索框中有文本，我检查酒吧或俱乐部复选框，它将删除文本并将其更新为酒吧和俱乐部..但我想要的是添加酒吧或俱乐部到现有的文本。东西linke searchBox.value = searchbox文本+'俱乐部'; – ChristopherG1994

欢迎您，我已经更新了我的回答:) –

你可能想使用无线电输入和而不是复选框。无论如何，这里的代码复选框：

<ul id="search-checkboxes"> 
    <li><label style="margin-left:20px">Bars: <input type="checkbox" data-value="Bars"></label></li> 
    <li><label style="margin-left:20px">Clubs: <input type="checkbox" data-value="Clubs"></label></li> 
</ul> 

<script> 
    $('#search-checkboxes :checkbox').change(function() { 
     if (this.checked) { 
      $("#pac-input").val($(this).data("value")); 
     } else { 
      $("#pac-input").val(""); 
     } 
    }); 
</script>

来源

2017-05-07 13:55:58 HtmHell

当checkBox被选中时更改输入字段的内容

回答

相关问题