Bold label if checkbox checked - no label selector

Question

I've got the following checkbox setup

 ul.list li label {
      font-weight: 300;
    }

  <ul class="list">
      <li>
        <label class="selectit">
          <input type="checkbox"/>
          "Blah" 
        </label>
      </li>
    </ul>

I'm trying to turn the label bold when the checkbox is checked.

But my label text doesn't have any html tag around it so the usual solution :checked + span or :checked + label doesn't work in this case.

How could I make the label bold in this case? Is it possible with CSS only?

The only way to do this: `label:has(> :checked) { font-weight: bold }`. However, as of 2021, this is still not supported by any browser. https://caniuse.com/css-has — BOZ, Jan 12 '21 at 06:41
Thanks @TemaniAfif, I think the focus-within solution will work. But how's the browser compatibility though? I actually think the JS answer may be better in this case. — Joe Bloggs, Jan 12 '21 at 08:05
if you don't care about IE, the support is pretty good: https://caniuse.com/css-focus-within — Temani Afif, Jan 12 '21 at 08:06

MWP · Accepted Answer · 2021-01-12T07:28:56.310

1

You can accomplish this with CSS, but website functionality really shouldn't be accomplished with CSS, it should be accomplished with JavaScript.

You can try this JavaScript.

window.onload = function() {
  document.querySelectorAll('ul.list li input').forEach(item => {
    item.addEventListener('click', event => {
      var label = item.parentNode;
      if (item.checked) {
        label.style.fontWeight = "bold";
      } else {
        label.style.fontWeight = "normal"
      }
    })
  })
}

edited Jan 12 '21 at 07:28

answered Jan 12 '21 at 06:46

MWP

48
8

Hey thanks, I think I'm nearly there. It works, but it only works for the first checkbox out of the 12 in total. Is there anything to change to make it work for all checkboxes in the list? – Joe Bloggs Jan 12 '21 at 07:01
I would assume they all share the same class? – MWP Jan 12 '21 at 07:03
I changed the checkbox line from "var checkBox = document.querySelectorAll("input")[0];" to "var checkBox = document.querySelectorAll("ul.list li input")[0];" would it change anything? – Joe Bloggs Jan 12 '21 at 07:12
https://jsfiddle.net/he8rt3ux/2 – MWP Jan 12 '21 at 07:21
No, it won't change anything. I updated the JSFiddle. – MWP Jan 12 '21 at 07:23
Hey @willpakpoy, thanks again, I chose your answer, the updated fiddle works perfectly, but can you please update your initial answer as per the fiddle? – Joe Bloggs Jan 12 '21 at 07:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227178/discussion-between-willpakpoy-and-joe-bloggs). – MWP Jan 12 '21 at 07:36

score 1 · Answer 2 · answered Jan 12 '21 at 07:19

I have seen your comments on the answer given by @willpakpoy that you have satisfied with his answer but want to change the text to bold for more inputs at once. So I have modified his answer so that it should work for any number of inputs elements. check the snippet.

 window.onload = function() {
  var checkBox = document.querySelectorAll("input");
  var label = document.querySelectorAll(".selectit");

var label = [...label]

label.forEach((el) => {
el.addEventListener("click", () => {
  if(el.firstElementChild.nodeName === "INPUT"){
  if (el.firstElementChild.checked === true) {
      el.style.fontWeight = "bold"
    } else {
      el.style.fontWeight = "normal";
    }
}
})

  });
}

 <ul class="list">
        <li>
          <label class="selectit">
            <input type="checkbox"/>
            "Blah" 
          </label>
        </li>
        <li>
          <label class="selectit">
            <input type="checkbox"/>
            "Blah" 
          </label>
        </li>
        <li>
          <label class="selectit">
            <input type="checkbox"/>
            "Blah" 
          </label>
        </li>
        <li>
          <label class="selectit">
            <input type="checkbox"/>
            "Blah" 
          </label>
        </li>
      </ul>

score 0 · Answer 3 · answered Jan 12 '21 at 06:43

0

Use the :checked pseudo-class:

#checkBox:checked + label {
  font-weight: bolder;
}

<input id="checkBox" type="checkbox" />
<label for="checkBox">Blah</label>

Codepen: https://codepen.io/manaskhandelwal1/pen/BaLqarq

answered Jan 12 '21 at 06:43

Manas Khandelwal

3,790
2
11
24

But in the question he asked if it was possible without breaking the structure. – BOZ Jan 12 '21 at 06:47
exactly, my setup is other way around. I've got input inside label, so this won't work. – Joe Bloggs Jan 12 '21 at 06:55
Ultimately the solution is the same, and the label tag is best used with for attribute. The label text appears next, same as his code. I find this as a clean solution, yes many more solutions are available. – Manas Khandelwal Jan 12 '21 at 06:55
Ok, see here, this is the correct structure again, see if you can make it working https://jsfiddle.net/12qLpcje/ – Joe Bloggs Jan 12 '21 at 07:08

Bold label if checkbox checked - no label selector

3 Answers3