You can use CSS to style the label that immediately follows (as a sibling) any radio that has the attribute checked="checked". This is all you should need to add:
input[type='radio'][checked='checked']+label {
background: red;
}
The above CSS finds all inputs of type radio, with the attribute checked="checked", and applies a style if the next tag to follow this item is a label. In your example this is all you need to make the styling work.
If you also need a jquery function to help toggle the radio buttons then I have added this. I have had to guess how your code identifies different elements because you have provided all the HTML. This might need adaptation depending on the rest of your HTML. This will use the checked='checked' attributes of the radio options, but you can also uncomment some code to add an .active class if you prefer (this is unnecessary if you use the css styling given above.
All jquery lines are commented.
// Add click event to labels
$("label").click(function() {
// Store the name of the radio
radioName = $(this).attr("for")
// Remove radio specific identifier (i.e. _1) to get form name
formName = radioName.substring(0, radioName.length - 2);
// Remove all checked attributes from radio buttons who are wrapped in the .radio-group
$("input[type='radio'][name='" + formName + "']").removeAttr("checked");
// Uncomment the line below if you want to use an active class name
// $("input[type='radio'][name='" + formName +"']").removeClass("active");
// Find 'for' attribute
labelFor = $(this).attr("for");
// Add checked attribute to the clicked radio
$("input#" + labelFor).attr("checked", "checked");
// Uncomment the line below if you want to use an active class name
// $("input#" + labelFor).addClass("active");
});
input[type='radio'][checked='checked']+label {
background: red;
}
input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.form_response>label {
cursor: pointer;
display: block;
background-color: #182B54;
padding: 10px 20px;
font-size: 18px;
color: #fff;
font-weight: 500;
margin-left: 0;
}
.form_response>label:hover {
color: #182B54;
background-color: #FED007;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="<form id=" form_3c0cb7b9-a09a-4a95-be27-e27923448c8e ">
<div class="form_response ">
<input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1 " type="radio " data-text="Yes " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e " checked="checked " value="923518fd-e6ce-4989-8342-15d9b22e5a20 " autocomplete="off " required="required
" data-handler-change="1 ">
<label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_1 ">Yes</label>
</div>
<div class="form_response ">
<input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2 " type="radio " data-text="Undecided " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e " value="cff8e508-ba35-4e2b-99d6-fa375f1fc2da " autocomplete="off " required="required
" data-handler-change="1 ">
<label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8e_2 ">Undecided</label>
</div>
</form>
<form id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f ">
<div class="form_response ">
<input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_3 " type="radio " data-text="Yes " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f " checked="checked " value="923518fd-e6ce-4989-8342-15d9b22e5a20 " autocomplete="off " required="required
" data-handler-change="1 ">
<label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_3 ">Yes</label>
</div>
<div class="form_response ">
<input id="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_4 " type="radio " data-text="Undecided " name="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f " value="cff8e508-ba35-4e2b-99d6-fa375f1fc2da " autocomplete="off " required="required
" data-handler-change="1 ">
<label for="form_3c0cb7b9-a09a-4a95-be27-e27923448c8f_4 ">Undecided</label>
</div>
</form>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
