Question

我有这样的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。

Answer 1

这是使用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>

希望这对您有所帮助。

Answer 2

您可以获取特定的单击输入元素并在其上应用CSS样式

这是一个使用jQuery的简单示例：

$('input[type="checkbox"]').on('click', function(){
    $(this).toggleClass('fun-class');
});

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

2 个答案: