I need a simple solution: how can I retrieve the input value and apply it as a class to the same input? For example, I want to extract the value "gray" and add class="gray" to the surrounding label in order to style the label text that says "Gray".
This is the structure:
<li>
<label>
<input type="radio" id="acf-field" name="acf[field_5af32dbd01019]" value="gray"/>Gray
</label>
</li>
<li>
<label>
<input type="radio" id="acf-field" name="acf[field_5af32dbd01019]" value="green"/>Green
</label>
</li>
<li>
Using
$("li label").each(function() {
var $link = $(this).find("input").val();
will fetch each value, but how can I use .addClass to append a class to the enclosing label like this: <label class="gray">
The link below includes an answer on adding the class to the parent label: https://jsfiddle.net/j08691/qnzpahrq/
$("li input").each(function() {
$(this).parent().addClass($(this).val());
})