使用按钮选中HTML复选框

Question

我在谷歌上找不到解决方案，可能是我搜索的方式不对，但我想向StackOverflow可信赖的成员寻求帮助。我想使用HTML按钮来选中HTML复选框。我不想使用复选框纯粹是出于无障碍原因，因为我正在开发的应用程序将在终端上使用并通过触摸屏幕操作，所以HTML复选框太小了。唯一的问题是复选框列表是动态的，因为它使用SQL查询填充。显然，我可以为创建HTML按钮做同样的事情。我猜这需要JavaScript（现在我很愿意使用JavaScript，因为我发现我在这个应用程序中需要的大部分功能都需要JavaScript）来实现此功能。因此，澄清一下：我想单击一个按钮，比如它的值为“Fin Rot”，然后选中值为“Fin Rot”的复选框。然后，如果我单击另一个按钮，比如它的值为“Ich”，则也会选中值为“Ich”的复选框。

- Stefan

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>

或者（如果你不想在 checkbox 上使用 id，在 label 上使用 for）：

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

如果需要，你可以使用CSS隐藏复选框，但两者都可点击以切换复选框状态。

你可以在这里测试演示，同时也展示了一些按钮样式的CSS用于标签（label）。

- Nick Craver

---

+1 比我在你发布这篇文章时编写的基于 JS 的解决方案好太多了... - Paul

@Nick Craver，@David Thomas：哦，我只是复制了Nick的代码，它仍然是id"finRot"...那就算了吧 ;) - Felix Kling

@Nick：我想当我打开这个问题时，你的答案是“0秒前已回答” ：D 无论如何，我们可以删除所有这些毫无意义的评论 ;) - Felix Kling

一次又一次，StackOverflow的成员们再次为我提供了帮助...感谢"vishwanath"和"Dutchie342"的建议。Nick，我采用了你在链接中提供的解决方案，因为它可以通过CSS提供一些自定义选项。非常感谢你。我会把这个标记为答案。 - Stefan

这会在可访问性方面引起一些问题，特别是在使用 tab-index 进行移动时，用户无法将复选框标记为已选中。 - kamov

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>

- Dutchie432

Answer 3

如何使用HTML解决此问题。

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

用于创建复选框或单选按钮的标签。

- Vishwanath

---

或者，确实，任何其他的 input（和 textarea）元素... =) - David Thomas

Answer 4

如果你正在寻找bootstrap解决方案，我刚刚创建了这个：

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

- Filip Jakab

---

谢谢，你意识到这篇帖子已经九年了吧？ - Stefan

我知道...但谷歌仍然成功地将我指向了这篇文章。因此，我认为分享我的方法作为潜在访问者的参考可能会有用。 - Filip Jakab