用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

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。
• 用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>

​

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' )
    });
  }
)();