當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被選中時更改輸入字段的內容

回答

相關問題