使用按钮检查 html 复选框

2024-02-20

我正在努力在 Google 上的任何地方寻找解决方案,也许我搜索错误,但我想我会来询问 StackOverflow 上永远值得信赖的成员。

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

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

我猜测它需要 JavaScript(我现在非常高兴使用 JavaScript,因为我发现这个应用程序中需要的很多功能都需要 JavaScript)来执行此功能。

所以澄清一下:我想单击一个按钮,假设它的值为“Fin Rot”,然后选中值为“Fin Rot”的复选框。然后,如果我单击另一个按钮,假设它的值为“Ich”,那么它还会检查值为“Ich”的复选框


当你can为此使用按钮和 JavaScript,我可以建议一种更简单的方法吗?只需使用一个<label>这是设计的just为此,将其样式设置为按钮,例如:

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

或者(如果你不想使用id on checkbox and for on label):

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

....然后使用 CSS,您可以根据需要隐藏该复选框,但可以单击其中一个来切换该复选框。

您可以在这里测试演示 http://www.jsfiddle.net/nick_craver/Gf83S/,如果需要的话,还会在标签上显示一些按钮式的 CSS。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用按钮检查 html 复选框 的相关文章

  • 使用 Charts.js 禁用动画

    我在使用 Charts js 关闭动画时遇到一些问题 这是我的代码 var pieData value 30 color F38630 value 50 color E0E4CC value 100 color 69D2E7 var myP
  • 如何在Javascript中声明静态变量[重复]

    这个问题在这里已经有答案了 在下面的代码中 我希望有一个计数器来跟踪创建的 Person 对象的数量 这段代码没有这样做 我该如何实现呢 function Person this name Peter this counter this c
  • Chart.js - 如何将数组集合推入数据集

    我一直在尝试多种方法将数组集合推送到数据集中 任何人都可以帮助我根据下面的代码将数组推入堆积图表中 这是例子 Codepen 堆叠栏 https codepen io narendrajadhav pen abzpWam JavaScrip
  • MP4 视频无法在 Firefox 上播放

    我有一个小型家庭服务器 可以托管多个项目 其中包括一些 MP4 示例视频 我一直在使用一个简单的
  • 更改 3 列显示的比例:表格/表格单元格

    我有这个简单的设置 container display table width 70 text align center div border 1px solid 336 column display table cell div clas
  • 强制执行 show.bind

    我有一个包含数据的表 当从另一个视图触发事件时 我希望视图检查 show bind 语句 问题是该事件没有更改当前视图中的任何数据 foo html tr p canBeRemoved p tr 我正在使用 EventAggregator
  • 尝试使用 CasperJS 跟踪 iframe 中的链接

    我正在尝试使用CasperJS http casperjs org index html跟踪 iframe 中的链接 但我似乎无法获取 iframe 的文档 这是使用我找到的 iframe 示例页面进行的测试 第三个 iframe 有一个名
  • 按日期对 JSON 进行排序

    我知道这一定相对简单 但我有一个 JSON 数据集 我想按日期排序 到目前为止 我每次都会遇到问题 现在我将日期存储为this lastUpdated 如果有帮助的话 我可以访问 jquery 但我意识到 sort 是本机 JS 提前致谢
  • 内联执行生成的汇编程序

    我正在阅读以下演示文稿 http wingolog org pub qc 2012 js slides pdf http wingolog org pub qc 2012 js slides pdf其中讨论了 4 10 19 内联 ASM
  • 无法提取 Typescript 中的对象值

    我一直在尝试将 JavaScript Web 表单转换为 Typescript 但无法弄清楚如何处理以下内容 在 JavaScript 中有效 let fieldValues JSON parse cookieData let keys O
  • Javascript“命名空间”和 jQuery AJAX

    我正在使用此处列出的建议 http www odetocode com articles 473 aspx http www odetocode com articles 473 aspx 使用模拟的JavaScript AJAX网络聊天系
  • IE 上具有最小宽度的内联跨度

    Hi我有 3 个SPAN那一定是inline并且有和一个min width 显然在 IE 上 SPAN不能有一个min width 我尝试使用DIV但当我把它放在inline the min width是忽略 CSS span displa
  • 'DOMException:使用'option:selected'选择器时无法在'Element'上执行'querySelectorAll'

    我正在运行一个页面 该页面在以下行中引发错误 var label select find option selected html select find option first html 为了完整起见 这里是完整的 jQuery 函数
  • 单击时突出显示文本(javascript jquery html)

    当您在所有浏览器中双击某个单词时 它们会自动突出显示单击下的单词 但是否有可能找到一种方法exact单击一下就会发生同样的事情吗 我想这涉及到的事情可能是 TextRange 的东西 对所有段落 或整个正文或 div 的 onclick 做
  • 用于图形操作的 Javascript 库

    有没有建议的 javascript 替代 pythonpygraph http code google com p python graph or NetworkX http networkx lanl gov 应该注意的是 可视化不是必需
  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • 自动更改 Twitter Bootstrap 选项卡

    我希望 Twitter Bootstrap 选项卡按时间顺序更改 我使用它们有点像旋转木马 我希望选项卡每 10 秒切换到下一个选项卡 这是一个例子 http library buffalo edu http library buffalo
  • 隔离必需的字段验证器?

    我在页面上有两个搜索按钮 一个链接到下拉列表 另一个链接到带有文本框的下拉列表以获取更多搜索条件 我在所有上述控件上都需要现场验证器 当我从第一个下拉列表中选择某些内容并单击相应的搜索按钮时 文本框的字段验证器会触发 从而禁用第一个搜索按钮
  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T
  • javascript:获取带有单位的CSS prop值[重复]

    这个问题在这里已经有答案了 我的代码是这样的 image 1 position absolute top 3vw 我的尝试 http jsfiddle net z8k6t3fb 1 http jsfiddle net z8k6t3fb 1

随机推荐