checkBoxがチェックされているときに入力フィールドの内容を変更します

Question

checkBoxがチェックされているときにSearchboxの内容を変更したいと思います。

だから私は、チェックボックス、次しまっ：

<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"> 

です。

Barsチェックボックスがアクティブになっているときに私のチェックボックスの内容をBarsに変更する可能性を探していて、Clubs checkBoxがアクティブになっているときにそれをClubsに変更したいとします。

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 = ''; 
    } 
} 

Answer 2

をあなたはおそらくラジオ入力を使用したいとチェックボックスではありません。とにかく、チェックボックス付きのコードは次のとおりです：

<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>