Styling all unchecked checkboxes after an item is selected

Question

I am currently styling a form that already utilizes the checkbox trick of styling the labels to look how I want them to look, and so far I have had success with this. However, my goal is to have all of the checkboxes appear as normal, but once an item has been selected, I would like all of the remaining unchecked boxes to reduce in opacity.

I've come close with my targeting, shown below:

input[type=radio]:checked+label {
    opacity: 1;
}

input[type=radio]:not(:checked)+label {
    opacity: 0.5;
}

I was able to style all checked and unchecked how I want them. The trouble is by default, all checkboxes are unchecked, therefore all of the items are automatically displayed with reduced opacity until an item is checked.

If there is a way to only apply the reduced opacity to unchecked items only after an item is selected, I could use some help in discovering how. CSS-only solutions are preferable, but I am open to using javascript/jquery if necessary. Thanks!

Edit: Here is a rough demo showcasing my dilemma

https://jsfiddle.net/james_doe/wva3pdek/1/

Welcome to Stack Overflow! Questions seeking debugging help should include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it within the question itself. Questions without a clear problem statement are not useful to other readers. Please see: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — Gerardo BLANCO, Feb 12 '18 at 17:39
Thank you for the pointers Gerardo. I will make it a habit to provide a jsfiddle demo with future requests I have. Here is my work thus far: https://jsfiddle.net/james_doe/wva3pdek/1/ I'll explore some possible JS solutions for this Huangism. If there are any demos or tutorials you might be familiar with that will help me discover a solution, any guidance would be appreciated! — JMC_3030, Feb 12 '18 at 18:40

score 0 · Accepted Answer · answered Feb 12 '18 at 19:36

Here is an updated jsfiddle. All I added was:

$("input[type=radio]").click(function(){
    $("input[type=radio]:checked+label").css("opacity", "1");
  $("input[type=radio]:not(:checked)+label").css("opacity", "0.5");
});

The code simply uses jquery to detect when you click a radio button and then sets opacity to 1 while setting the others to 0.5

Styling all unchecked checkboxes after an item is selected

1 Answers1