Add value as class

Question

I have some radio buttons and want to add the value of the selected to the parent element (label) but this does not work:

jQuery(document).ready(function($){
    var columns = $(".acf-field-59e775b8e5977 .acf-input .acf-button-group  label.selected input").val(); 
        if(columns == "4"){
        $(this).parent().addClass("four");
    }
});

This is the field:

<label class="selected"><input name="acf_1" value="4" checked="checked" type="radio">4/12</label>

@SLaks https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors — j08691, Dec 18 '17 at 16:58
What are you using the value for? Depending on *why you want to do this* heavily weighs in on how to do it correctly (especially since this is an [XY Problem](https://meta.stackexchange.com/a/66378/171858)) — Erik Philips, Dec 18 '17 at 17:17

Serving Quarantine period · Accepted Answer · 2017-12-18T17:05:35.483

2

Based on the code you provide, do like this:-

jQuery(document).ready(function($){
    var obj = $("input[name='acf_1']"); 
    if(obj.val() == 4){
     obj.parent('label').addClass("four");
    }
});

Working snippet:-

jQuery(document).ready(function($){
    var obj = $("input[name='acf_1']"); 
    if(obj.val() == 4){
     obj.parent('label').addClass("four");
    }
});

.four{
  font-size:20px;
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is the field:

<label class="selected"><input name="acf_1" value="4" checked="checked" type="radio">4/12</label>

edited Dec 18 '17 at 17:05

answered Dec 18 '17 at 16:54

Serving Quarantine period

66,345
10
43
85

For soime reason it does not work in my wordpress backend, but yes, thanks. – Henning Fischer Dec 19 '17 at 08:29

score 1 · Answer 2 · answered Dec 18 '17 at 16:51

As SLaks mentioned, Class names cannot start with numbers. You say in the comments that the numbers for the class name is just an example, but when I test your code in JSFiddle with "test" instead of "4", it works.

https://jsfiddle.net/mn7dk5h2/

jQuery(document).ready(function($){
    var columns = $("input").val(); 
    alert(columns);
    if(columns == "test"){
            alert('marco')
        $(this).parent().addClass("test");
    }
});

and

<label class="selected"><input name="acf_1" value="test" checked="checked" type="radio">4/12</label>

So based on the code you've provided, the problem seems to be that the class name starts with a number.

Add value as class

2 Answers2