单击复选框后如何设置标签标签的样式?

沙申克(Shashank Chaudhary)

我有这样的HTML标记。

<html>
<head></head>
<body>
<input type="checkbox" id="Randomly generated ID" onclick="fun()">
<label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>
</html>

在单击复选框时,我想使用javascript中的fun()函数为标签添加CSS样式。我这样做很麻烦,而且两个元素都有一个随机生成的ID,不能有相同的ID。

阿德南·谢里夫(Adnan Sharif)

这是使用Vanilla Js的实现

function fun(inputElement) {
  var backgroundColor = inputElement.checked ? 'yellow' : 'white';
  var labelSelector = 'label[for="' + inputElement.id + '"]';
  var labelElement = document.querySelector(labelSelector);
  inputElement.style.background = backgroundColor;
  labelElement.style.background = backgroundColor;
}
<html>

<head></head>

<body>
  <input type="checkbox" id="CHECKBOX_ID" onclick="fun(this)">
  <label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>

</html>

希望这会对您有所帮助,谢谢。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用标签设置多个附加复选框的样式

如何设置嵌套在标签标签中的复选框的样式

以编程方式设置复选框样式模板标签 WPF

样式设置后无法单击复选框

Laravel:单击标签未设置复选框

复选框样式设置为非复选框-需要标签填充行

如何防止单击复选框的标签范围。仅在复选框上可单击

如何防止单击复选框标签窃取焦点

选中后如何设置复选框的样式?

如何使用 wtforms 设置复选框标签的类?

选中复选框后,如何为复选框的标签添加边框?

选择后更改复选框标签

以模式设置复选框标签的文本

复选框标签

如何单击克隆的标签并将复选框的选中属性更改为false并单击复选框并删除克隆

如何对齐复选框长标签?

如果在asp.net中选中了复选框,如何更改复选框标签的样式?

如果选中复选框但首先设置标签然后输入,如何突出显示标签?

React复选框未将其状态设置为在标签单击时选中

选中复选框时更改标签的样式-Ionic 3

当两个标签都包裹在DIV中时,根据复选框对标签进行样式设置

隐藏复选框并使标签可单击。JS

单击复选框标签时出现问题

如何使用纯CSS(无JS)控制有关复选框的标签样式?

获取复选框标签

单击复选框标签时是否可以不触发该复选框?

无法单击标签以选择具有Bootstrap复选框布局的复选框

如何选择所有 p 标签并在单击复选框时使它们可见?

单击标签重复出现部分视图时,如何进行复选框检查