javascript - 使用 JavaScript 检查时将复选框/单选标签设为粗体

Question

我想label在单选/复选框检查中使父元素变为粗体。它适用于复选框，但收音机的标签保持粗体。

HTML：

<h4>Radios:</h4>
<div class="checkgroup">
    <label for="green"><input type="radio" name="test" id="green">Green</label>
    <label for="blue"><input type="radio" name="test" id="blue">Blue</label>
    <label for="red"><input type="radio" name="test" id="red">Red</label>
</div>
<hr />
<h4>Checkboxes:</h4>
<div class="checkgroup">
    <label for="green-check"><input type="checkbox" id="green-check">Green</label>
    <label for="blue-check"><input type="checkbox" id="blue-check">Blue</label>
    <label for="red-check"><input type="checkbox" id="red-check">Red</label>
</div>

JavaScript：

function makeLabelBold() {
    const radios = document.querySelectorAll("input[type='radio']");
    const checkboxes = document.querySelectorAll("input[type='checkbox']");

    radios.forEach((radio) => {
        radio.addEventListener("click", function () {
            this.checked
                ? (this.parentElement.style.fontWeight = "700")
                : (this.parentElement.style.fontWeight = "400");
        });
    });

    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener("click", function () {
            this.checked
                ? (this.parentElement.style.fontWeight = "700")
                : (this.parentElement.style.fontWeight = "400");
        });
    });
}

makeLabelBold();

我尝试使用change事件而不是单击，但这不起作用。有任何想法吗？这是一支可供试用的笔。

代码笔：

用于测试的 Codepen

标签： javascript

Answer 1

你可以在没有 JavaScript 的情况下做到这一点。您可以使用:checkedCSS 选择器。像这样的东西：

input:checked + span {
  font-weight: 700;
}

<h4>Radios:</h4>
<div class="checkgroup">
    <label for="green"><input type="radio" name="test" id="green"><span>Green</span></label>
    <label for="blue"><input type="radio" name="test" id="blue"><span>Blue</span></label>
    <label for="red"><input type="radio" name="test" id="red"><span>Red</span></label>
</div>
<hr />
<h4>Checkboxes:</h4>
<div class="checkgroup">
    <label for="green-check"><input type="checkbox" id="green-check"><span>Green</span></label>
    <label for="blue-check"><input type="checkbox" id="blue-check"><span>Blue</span></label>
    <label for="red-check"><input type="checkbox" id="red-check"><span>Red</span></label>
</div>

如果您仍然想使用 JavaScript：

单选列表不会为其每个单选框触发事件，而只会针对已真正更改的单选框触发事件（只要我们没有以编程方式更改其值，您就可以单击它/）。我做了什么：

• 替换this为e.target获取radio您单击的内容。
• 得到它的name属性getAttribute("name")
• name找到所有具有相同属性的收音机`
• 使用此属性从所有收音机中删除样式
• 对当前选定的样式应用样式radio

function makeLabelBold() {
    const radios = document.querySelectorAll("input[type='radio']");
    const checkboxes = document.querySelectorAll("input[type='checkbox']");

    radios.forEach((radio) => {
        radio.addEventListener("click", function (e) {
            const inputsName = e.target.getAttribute("name");
            const sameNameRadios = document.querySelectorAll("[name='"+inputsName+"']");
            sameNameRadios.forEach(radio=>{
               radio.parentElement.style.fontWeight = "400";
            });
            e.target.parentElement.style.fontWeight = "700";
            
        });
    });

    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener("click", function () {
            this.checked
                ? (this.parentElement.style.fontWeight = "700")
                : (this.parentElement.style.fontWeight = "400");
        });
    });
}

makeLabelBold();

<h4>Radios:</h4>
<div class="checkgroup">
    <label for="green"><input type="radio" name="test" id="green">Green</label>
    <label for="blue"><input type="radio" name="test" id="blue">Blue</label>
    <label for="red"><input type="radio" name="test" id="red">Red</label>
</div>
<hr />
<h4>Checkboxes:</h4>
<div class="checkgroup">
    <label for="green-check"><input type="checkbox" id="green-check">Green</label>
    <label for="blue-check"><input type="checkbox" id="blue-check">Blue</label>
    <label for="red-check"><input type="checkbox" id="red-check">Red</label>
</div>