使用按钮检查html复选框

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>

或(如果您不想使用idon checkbox和foron label):

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

....然后使用CSS,您可以隐藏复选框(如果需要),但可以单击以切换复选框.

您可以在这里测试一个演示,如果需要,还可以在标签上显示一些按钮CSS.