Question

我在populate text box on click of radio button

看到了这个问题/答案

这基本上实现了我想要的，但是我想用自己的图像作为按钮而不是单选按钮，所以你点击图像＆＃34;标记＆＃34;然后它会变灰/变得几乎透明，它将填写表格字段。

这是一个搜索表单，所以人们可以点击一个按钮，上面写着＆＃34;餐馆＆＃34;然后它会在餐馆的表格字段中填写，如果他们愿意，他们仍然可以输入主搜索字段，但只是为了引导用户更多。

如果有任何方式我们可以在没有javascript的情况下做到这一点，那么很棒，但我可能无法看到这种情况发生。

希望它相对简单。

提前致谢

Answer 1

点击Fiddle！

享受：）

<强> HTML

 <fieldset data-role="controlgroup" data-type="horizontal">
    <div>
    <img class="stam" alt="Resturant" src="img1.jpg"/>

    <img class="stam" alt="Gym" src="img2.jpg"/>        

    </div>
</fieldset>       
<br>
<form>
    <input type="text">
</form>

<强> JS：

$('.stam').on('click', function() {
    $('input[type="text"]').val($(this).attr("alt"));

});

Answer 2

DEMO

一些变化，你很高兴！

HTML

<fieldset data-role="controlgroup" data-type="horizontal">
  <div id="img_filter">
    <img data-filter="Restaurant" src="http://placehold.it/120x30/&text=Restaurant"/>
    <img data-filter="Park" src="http://placehold.it/120x30/&text=Park"/>
    <img data-filter="Bank" src="http://placehold.it/120x30/&text=Bank"/>
  </div>
</fieldset>       
<form>
  <input id="query" type="text" />
</form>

JS

$('#img_filter img').on('click', function() {   
 $('#query').val($(this).data('filter'));
});

使用按钮图像填充表单文本字段

2 个答案:

DEMO

HTML

JS