Установить цвет текста и текст рядом с флажком

Question

Как установить цвет текста (и текста) рядом с флажком?

<div style="float: left;">
    <input type="checkbox" id="idCheckbox1" onClick="myCheckbox('idCheckbox1')" value=1><label>Checkbox 1</label></input></div>
<script>
function myCheckbox(idCheckbox)
{
    var ctlCheckbox = document.getElementById(idCheckbox);
    var ctlCheckText = ctlCheckbox.parentNode.getElementsByTagName("LABEL")[0];
    var text = ctlCheckText.innerText;

    if (true == ctlCheckbox.checked)
        alert('checked');
    else
        alert('not checked');
    if (ctlCheckbox.checked == true)
       ctlCheckText.innerText = 'smurfs';
    else
       ctlCheckText.InnerText = 'gargamel';
}
</script>

Поиск в интернете немного помог. Я могу получить текст и определить состояние проверки, однако установка цвета или изменение текста больше, чем изначально, не работает.

Я хочу установить текст синим, так что я подумал следующее, что не работает, досадно, так.

 if (true == ctlCheckbox.checked)
     ctlCheckText.innerHTML = '<span style="color:#0000FF">' + text + '</span>';
 else
     ctlCheckText.innerHTML = '<span style="color:#000000">' + text + '</span>';

Мысли

Здесь - это пример проекта, который я создал?

Answer 1

Вы почти у цели. Вместо установки встроенного стиля используйте класс, а затем в зависимости от статуса checkbox add или remove класс blue из classList

Также вместо if (ctlCheckbox.checked == true) вы можете использовать только if (ctlCheckbox.checked), так как оно будет оценено как true, но если вы все еще хотите использовать, тогда используйте === вместо ==, то есть if (ctlCheckbox.checked === true)

function myCheckbox(idCheckbox) {
  var ctlCheckbox = document.getElementById(idCheckbox);
  var ctlCheckText = ctlCheckbox.parentNode.getElementsByTagName("LABEL")[0];
  var text = ctlCheckText.innerText;

  if (ctlCheckbox.checked) {
    ctlCheckText.innerHTML = 'smurfs';
    ctlCheckText.classList.add('blue')

  } else {
    ctlCheckText.innerHTML = 'gargamel';
    if (ctlCheckText.classList.contains('blue')) {
      ctlCheckText.classList.remove('blue')
    }
  }
}

.blue {
  color: blue;
}

<div style="float: left;">
  <input type="checkbox" id="idCheckbox1" onClick="myCheckbox('idCheckbox1')" value='1'><label>Checkbox 1</label>
</div>