I am editing a form in Google Optimize that has both radio input "buttons" as well as a button made from a label. I am trying to make it so that when a the "one time purchase" radio input button is clicked, the "Delivery option" label’s active class is removed. I’m sure this should be fairly simple but am new to JQuery and JS and I have been struggling to figure out how to do this. Can someone please help me figure out what I’m doing wrong?
Here is what I’ve tried so far:
$('input:radio').click(function () {
if ($('.option-itemlabel[data-label="One-Time Purchase"]').is(':checked')) {
$('#radio-subscribe label').removeClass('active');
} else {
$('#radio-subscribe label').addClass('active');
}
});
$('input:radio').click(function () {
$('#radio-subscribe label').removeClass("active");
if ($(this).is(":checked")) {
var label = $(this).attr("[data-label=One-Time Purchase]");
$('#radio-subscribe label').addClass("active");
}
});
$('input:radio').on('click', function() {
if($(this).attr("data-label") == "One-Time Purchase"){
$('#radio-subscribe label').removeClass('active');}
else{
$('#radio-subscribe label').addClass('active');
$(this).removeClass('active');
});
Here is my CSS
#radio-subscribe>label {
background-color : rgb(255, 255, 255);
}
#radio-subscribe label.active {
background-color : rgb(0, 0, 0);
color : rgb(255, 255, 255);
}
div.delivery-flex>div:nth-of-type(n)>label {
background-color : rgb(255, 255, 255);
}
.option-item[data-label] input[type="radio"]:checked + label {
background-color : rgb(0, 0, 0);
color : rgb(255, 255, 255);
}
Here is my html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex delivery-flex">
<div class="option-item df-radio-item" data-label="One-Time Purchase">
<input
data-label="One-Time Purchase"
class="form-radio "
type="radio"
id="attribute_rectangle__136_182"
name="attribute[136]"
value="182"
checked
data-default
>
<label class="form-option" for="attribute_rectangle__136_182" data-product-attribute-value="182">
<span class="form-option-variant">One-Time Purchase</span>
</label>
</div>
<div class="option-item df-radio-item" data-label="Every Week">
<input
data-label="Every Week"
class="form-radio "
type="radio"
id="attribute_rectangle__136_183"
name="attribute[136]"
value="183"
>
<label class="form-option" for="attribute_rectangle__136_183" data-product-attribute-value="183">
<span class="form-option-variant">Every Week</span>
</label>
</div>
<div class="option-item df-radio-item" data-label="Every 2 Weeks">
<input
data-label="Every 2 Weeks"
class="form-radio "
type="radio"
id="attribute_rectangle__136_184"
name="attribute[136]"
value="184"
>
<label class="form-option" for="attribute_rectangle__136_184" data-product-attribute-value="184">
<span class="form-option-variant">Every 2 Weeks</span>
</label>
</div>
<div class="option-item df-radio-item" data-label="Every Month">
<input
data-label="Every Month"
class="form-radio "
type="radio"
id="attribute_rectangle__136_185"
name="attribute[136]"
value="185"
>
<label class="form-option" for="attribute_rectangle__136_185" data-product-attribute-value="185">
<span class="form-option-variant">Every Month</span>
</label>
</div>
<div class="option-item df-radio-item subscribe-grp disabled" data-label="subscribe" id="radio-subscribe">
<input
data-label="Delivery Option"
class="form-radio "
type="radio"
id="attribute_rectangle__136_186"
name="attribute[136]"
value="186"
>
<label class="form-option" for="subscribe_list">
<strong class="form-option-variant">Delivery Option</strong>
<span class="form-option-variant">Save 10% on every shipment in your order</span>
</label>
</div>
2
Answers
Try following:
AlexGriva here.
I read the ask details carefully.
Understand your intention.
Try the code below.
Hope it helps.
Looking forward to many fellowships in the future