在复选框旁边设置文本颜色和文本

时间:2019-03-12 16:46:22

标签: javascript html checkbox input styles

如何设置复选框旁边的文本颜色(和文本)?

<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>';

有想法吗?

Here是我创建的一个示例项目?

0 个答案:

没有答案