使用 JavaScript 勾选复选框/单选 label 粗体

Question

我想在单选/复选框检查中将父label元素设为粗体。 它适用于复选框，但收音机的 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

Answer 1

您可以在没有 JavaScript 的情况下执行此操作。 您可以使用:checked CSS 选择器。 像这样的东西：

 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 。
• 使用getAttribute("name")获取它的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>

Answer 2

在不更改 HTML 的情况下：

 (function() { const radios = document.querySelectorAll('input[type="radio"]'), checkboxes = document.querySelectorAll('input[type="checkbox"]'); radios.forEach(radio => { radio.onclick = () => radios.forEach( r => r.closest('label').style.fontWeight = r.checked? '700': '400' ) }); checkboxes.forEach(checkbox => { checkbox.onclick = () => checkbox.closest('label').style.fontWeight = checkbox.checked? '700': '400' }); } )()

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

你也可以这样做：

(function()
  {
  const radios_checkboxes = document.querySelectorAll('input[type="radio"], input[type="checkbox"]');
  radios_checkboxes.forEach(rc => 
    {
    rc.onclick =()=> 
      radios_checkboxes.forEach(elm => 
        elm.closest('label').style.fontWeight = elm.checked ? '700' : '400' )
    });
  }
)();