Question

我很难在谷歌的任何地方找到解决方案，也许我的搜索不正确，但我想我会问问StackOverflow值得信赖的成员。

我想使用html按钮检查html复选框。我不想使用复选框的原因纯粹是出于可访问性原因，因为我正在开发的应用程序将在终端上并通过触摸屏使用，因此HTML复选框太小。

唯一的问题是复选框列表是动态的，因为它是使用SQL查询填充的。但显然我可以为创建HTML按钮做同样的事情。

我猜测它需要JavaScript（我现在非常高兴使用，因为我发现这个应用程序需要很多功能需要JavaScript）才能实现这个功能。

所以要澄清一下：我想点击一个按钮，说它的值为“Fin Rot”，并选中值为“Fin Rot”的复选框。然后如果我点击另一个按钮，说它的值为“Ich”，那么它也会选中值为“Ich”的复选框

Answer 1

虽然你可以使用按钮和JavaScript，但我可以建议一个更简单的方法吗？只需使用为此设计的的<label>，并将其设置为按钮，例如：

<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>

或（如果您不想在id上使用checkbox而for上使用label）：

<label>
    <input type="checkbox" name="something" value="Fin Rot">
    Some text here, could be "Fin Rot"
</label>

....然后使用CSS，您可以隐藏复选框（如果需要），但可以点击以切换复选框。

You can test out a demo here，如果需要，还会在标签上显示一些按钮CSS。

Answer 2

此示例使用按钮来打开/关闭复选框。

http://jsfiddle.net/DnEL3/

<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>

Answer 3

HTML解决方案怎么样？

 <p><input type="checkbox"
 value="Another check box"
 name="cboxwithlabel" id="idbox"><label
 for="idbox">Another
 checkbox</label></p>

＆LT;标签＆gt;为复选框或单选按钮创建标签。

Answer 4

如果您正在寻找引导程序解决方案，那么我刚刚创建了这个：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Here starts the component -->
      <label class="input-group">
        <span class="input-group-addon">
          <input type="checkbox">
        </span>
        <span class="form-control btn btn-primary">
          Click to toggle checkbox
        </span>
      </label>
      <!-- Here ends the component -->
    </div>
  </div>
</div>

使用按钮检查html复选框

4 个答案: