在Javascript中更改复选框标签

Changing a checkbox label in Javascript

本文关键字：复选框 标签 Javascript      更新时间：2023-09-26

我正在尝试更改Javascript中的复选框标签。这个网站是Wordpress，表单是一个插件，所以我必须使用一个代码片段插件来瞄准复选框。

简而言之，当会话已满时，复选框需要变灰，标签文本需要用红色突出显示。

下面是我使用的代码: 

var mon1 = document.getElementById('Mondays_7_1_1');
mon1.disabled = true;
mon1.style.color = "red";
<div>
<input class="" type="checkbox"  name="Mondays[]" value="5.00-6.00pm: 4-6 year olds  FULL" id="Mondays_7_1_1" /> 5.00-6.00pm: 4-6 year olds  FULL<br>
<input class="" type="checkbox"  name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 6.00-7.00pm: 7-9 year olds<br>
<input class="" type="checkbox"  name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 7.00-8.00pm: 10-14 year olds FULL
</div>
<div style="font-weight: normal;color:red;" id="checkbox_Mondays_7_1"></div>

盒子变灰不是问题，但是我不能改变标签的字体颜色。有人知道是什么问题吗?

您可以做到这一点的唯一方法是更改您的标记，因为文本不是复选框的一部分。你所需要做的就是在复选框和它们各自的文本周围添加标签，然后用JS遍历到正确的标签。

你的复选框应该有<label> s，这样当文本被点击时，它就会触发它的复选框。

您可以使用parentNode

定位标签

var mon1 = document.getElementById('Mondays_7_1_1');
mon1.disabled = true;
mon1.parentNode.style.color = "red";
<label>
    <input class="" type="checkbox"  name="Mondays[]" value="5.00-6.00pm: 4-6 year olds  FULL" id="Mondays_7_1_1" /> 
    5.00-6.00pm: 4-6 year olds  FULL
</label>
<br />
<label>
    <input class="" type="checkbox"  name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 
    6.00-7.00pm: 7-9 year olds
</label>
<br />
<label>
    <input class="" type="checkbox"  name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 
    7.00-8.00pm: 10-14 year olds FULL
</label>
<br />

注意:如果您打算触发复选框更改，请使用change/onChange而不是click/onClick。

这是因为Style只适用于INPUT。我已经为文本添加了一个标签。

HTML 

<div>
    <input class="" type="checkbox"  name="Mondays[]" value="5.00-6.00pm: 4-6 year olds  FULL" id="Mondays_7_1_1" /><label id="Mondays_7_1_1-text">5.00-6.00pm: 4-6 year olds  FULL</label><br>
    <input class="" type="checkbox"  name="Mondays[]" value="6.00-7.00pm: 7-9 year olds" id="Mondays_7_1_2" /> 6.00-7.00pm: 7-9 year olds<br>
    <input class="" type="checkbox"  name="Mondays[]" value="7.00-8.00pm: 10-14 year olds FULL" id="Mondays_7_1_3" /> 7.00-8.00pm: 10-14 year olds FULL
</div>
<div style="font-weight: normal;color:red;" id="checkbox_Mondays_7_1"></div>

JS 

var mon1 = document.getElementById('Mondays_7_1_1');
mon1.disabled = true;
var mon1Text = document.getElementById('Mondays_7_1_1-text');
mon1Text.style.color = "red";

JSFiddle

例如，将文本环绕<span>，因为它不是输入的一部分。

<div><input class="" type="checkbox"  name="Mondays[]" value="5.00-6.00pm: 4-6 year olds  FULL" id="Mondays_7_1_1" />
<span name="Mondays_7_1_1">5.00-6.00pm: 4-6 year olds  FULL</span>
...
<script>
var monSpan = document.getElementsByName('Mondays_7_1_1')[0];
monSpan.style.color = "red";</script>

我不知道我有任何访问短代码的权限。

你唯一的解决方法是DOM操作。有味道的东西:

var disableFunc = function (id, index) {
    var childNodes = document.getElementById(id).parentNode.childNodes;
    var texts = Array();
    var textIndices = Array();
    for (var i = 0; i < childNodes.length; i++) {
        if (childNodes[i].nodeType == 3 && childNodes[i].nodeValue.trim() != "") {
            texts.push(childNodes[i].nodeValue);
            textIndices.push(i);
        }
    }
    var mon1 = document.getElementById(id);
    mon1.disabled = true;
    var span = document.createElement('span');
    span.innerHTML = texts[index - 1];
    span.style.color = 'red';
    mon1.parentNode.removeChild(childNodes[textIndices[index - 1]]);
    mon1.parentNode.insertBefore(span, childNodes[textIndices[index - 1]]);
}
disableFunc('Mondays_7_1_1', 1);
//disableFunc('Mondays_7_1_2', 2); //!' doesn't work !
//disableFunc('Mondays_7_1_3', 3); //!' doesn't work !

这将适用于1 disable，因为该函数不考虑新修改的DOM;) http://jsfiddle.net/sskqtL9x/4/

我建议你准备你的DOM(以匹配替换模式)通过包装你的标签在span s或label s，然后运行这个函数后一些调整是对它。

相关文章：