Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script>
jQuery(document).ready(function($) {
"use strict";
$('input[name="item_meta[185][]"]').on('change', function() {
var selected_div_class = '',
remove_div_class = '';
$('input[name="item_meta[185][]"]').each( function() {
if ( $(this).prop("checked") ) {
/* apply the highlight class to the selected option's parent div */
selected_div_class = $(this).prop('class') + '-highlight';
$(this).closest('div').addClass(selected_div_class);
} else {
/* remove highlights from any other options' parent div */
remove_div_class = $(this).prop('class') + '-highlight';
if ( $(this).closest('div').hasClass(remove_div_class) ) {
$(this).closest('div').removeClass(remove_div_class);
}
}
});
});
});
</script>
#frm_form_17_container div.highlight {
border: 1px solid #187374;
background-color: rgb(255,255,235);
}
#frm_form_17_container div.highlight label {
color: red;
font-weight: bold;
}
#frm_form_17_container div.red-highlight {
border: 3px double #000;
border-radius: 7px;
background-color: red;
padding: 0 1rem;
}
#frm_form_17_container div.red-highlight label {
color: white;
font-weight: bold;
}
#frm_form_17_container div.green-highlight {
border: 3px double #000;
border-radius: 7px;
background-color: green;
padding: 0 1rem;
}
#frm_form_17_container div.green-highlight label {
color: yellow;
font-weight: bold;
}
#frm_form_17_container div.blue-highlight {
border: 3px double #000;
border-radius: 7px;
background-color: blue;
padding: 0 1rem;
}
#frm_form_17_container div.blue-highlight label {
color: cyan;
font-weight: bold;
}
#frm_form_17_container div.yellow-highlight {
border: 3px double #000;
border-radius: 7px;
background-color: yellow;
padding: 0 1rem;
}
#frm_form_17_container div.yellow-highlight label {
color: green;
font-weight: bold;
}
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<div id="field_[key]_label" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</div>
<div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">[input opt=1 class="red"][input opt=2 class="green"][input opt=3 class="blue"][input opt=4 class="yellow"]</div>
[if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
[if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<div id="field_[key]_label" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</div>
<div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">[input]</div>
[if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
[if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>
<div class="frm_opt_container" aria-labelledby="field_vqf6g_label" role="group">
<div class="frm_radio" id="frm_radio_182-0"><label for="field_vqf6g-0">
<input type="radio" name="item_meta[182]" id="field_vqf6g-0" value="Red" data-invmsg="Radio Button With Individual Option Classes is invalid" class="red"> Red</label>
</div>
<div class="frm_radio" id="frm_radio_182-1"><label for="field_vqf6g-1">
<input type="radio" name="item_meta[182]" id="field_vqf6g-1" value="Green" data-invmsg="Radio Button With Individual Option Classes is invalid" class="green"> Green</label>
</div>
<div class="frm_radio" id="frm_radio_182-2"><label for="field_vqf6g-2">
<input type="radio" name="item_meta[182]" id="field_vqf6g-2" value="Blue" data-invmsg="Radio Button With Individual Option Classes is invalid" class="blue"> Blue</label>
</div>
<div class="frm_radio" id="frm_radio_182-3"><label for="field_vqf6g-3">
<input type="radio" name="item_meta[182]" id="field_vqf6g-3" value="Yellow" data-invmsg="Radio Button With Individual Option Classes is invalid" class="yellow"> Yellow</label>
</div>
</div>
<script>
jQuery(document).ready(function($) {
"use strict";
$('input[name="item_meta[182]"]').on('change', function() {
var selected_div_class = $('input[name="item_meta[182]"]:checked').prop('class') + '-highlight',
remove_div_class = '';
/* first remove highlights from any other options' parent div */
$('input[name="item_meta[182]"]').each( function() {
remove_div_class = $(this).prop('class') + '-highlight';
if ( $(this).closest('div').hasClass(remove_div_class) ) {
$(this).closest('div').removeClass(remove_div_class);
}
});
/* apply the highlight class to the selected option's parent div */
$('input[name="item_meta[182]"]:checked').closest('div').addClass(selected_div_class);
});
});
</script>
<script>
jQuery(document).ready(function($) {
"use strict";
$('input[name="item_meta[184][]"]').on('change', function() {
/* first remove highlights from any other options' parent div */
$('input[name="item_meta[184][]"]').each( function() {
if ( $(this).prop("checked") ) {
/* apply the highlight class to the selected option's parent div */
$(this).closest('div').addClass('highlight');
} else {
if ( $(this).closest('div').hasClass('highlight') ) {
$(this).closest('div').removeClass('highlight');
}
}
});
});
});
</script>
#frm_form_17_container div.highlight {
border: 3px double #187374;
border-radius: 7px;
background-color: rgb(255,255,235);
padding: 0 1rem;
}
#frm_form_17_container div.highlight label {
color: red;
}
<div class="frm_opt_container" aria-labelledby="field_m5hns_label" role="group">
<div class="frm_radio" id="frm_radio_183-0"><label for="field_m5hns-0">
<input type="radio" name="item_meta[183]" id="field_m5hns-0" value="Red" data-invmsg="Standard Radio Buttons is invalid"> Red</label>
</div>
<div class="frm_radio" id="frm_radio_183-1"><label for="field_m5hns-1">
<input type="radio" name="item_meta[183]" id="field_m5hns-1" value="Green" data-invmsg="Standard Radio Buttons is invalid"> Green</label>
</div>
<div class="frm_radio" id="frm_radio_183-2"><label for="field_m5hns-2">
<input type="radio" name="item_meta[183]" id="field_m5hns-2" value="Blue" data-invmsg="Standard Radio Buttons is invalid"> Blue</label>
</div>
<div class="frm_radio" id="frm_radio_183-3"><label for="field_m5hns-3">
<input type="radio" name="item_meta[183]" id="field_m5hns-3" value="Yellow" data-invmsg="Standard Radio Buttons is invalid"> Yellow</label>
</div>
</div>
<script>
jQuery(document).ready(function($) {
"use strict";
$('input[name="item_meta[183]"]').on('change', function() {
/* first remove highlights from any other options' parent div */
$('input[name="item_meta[183]"]').each( function() {
if ( $(this).closest('div').hasClass('highlight') ) {
$(this).closest('div').removeClass('highlight');
}
});
/* apply the highlight class to the selected option's parent div */
$('input[name="item_meta[183]"]:checked').closest('div').addClass('highlight');
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment