这是HTML:
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><input type="checkbox" checked="checked" onclick="return false"/></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><input type="checkbox" onclick="return false" disabled="disabled"/></a>
<a class="dropdown-item" href="#"><input type="checkbox" onclick="return false"/></a>
<a class="dropdown-item" href="#"><input type="checkbox" checked onclick="return false"/></a>
</div>
</div>
基本上，这是一个Bootstrap下拉示例。
我需要一个表列过滤器，以便能够通过true、false或无过滤器进行过滤。
不要介意这里的JS逻辑。
- 复选框是"仅用于演示"的-它们不应该用作复选框，而是用作复选框符号。我没有时间和资源在这里提供矢量图形/专用字体。我希望尽可能简单。将其粘贴到JSFiddle中，并包含Bootstrap以查看其外观
- 所有复选框必须在现代桌面和移动浏览器上正确显示
它不应该破坏任何东西。
但是，Visual Studio会警告我注意button中的input。我知道，这是违反HTML标准的，但我在Edge、Chrome和FireFox上测试过，它确实有效。这里有陷阱吗？
我知道，按钮元素中的复选框(或任何其他输入(BEHAVIOR是未定义的。但如果我不想让它们发挥作用，就显示一下——应该没问题吧？好吧，我甚至注意到了未定义的行为：如果一个浏览器决定允许复选框在按钮内运行，我会显式地将onclick属性设置为仅返回false。
那么，你会离开还是不离开？有没有更好的方法来呈现这样的过滤器？也许一个免费的网页字体玩得很好的Bootstrap？一种具有复选框、未选中框、星形或任何其他表示"我不在乎是否选中"的符号的网络字体。
不，您不应该忽略警告。在<a>链接或<button>元素中放置交互式元素(如<input>元素(是无效的HTML，这会产生可访问性问题。
一些附加注意事项：
-
您的下拉菜单项是否像复选框一样？如果用户单击某个复选框，复选框的状态是否会更改？如果是这样，则应该使用
<input type="checkbox">元素，而不是链接的。 -
相反，如果你的下拉菜单项表现得像链接(将用户带到新内容(，你不应该让它们看起来像复选框。
如果您确实找到了需要<a>链接或看起来像复选框的<button>元素的语义上合理的原因，则应该使用<img>作为复选框的框部分，而不是选择另一个语义上不合适的元素。