I would like to give users the ability to choose from a series of checkboxes with additional options to add to their CSS.
Using JavaScript, I am searching for checked boxes, extracting their names, adding them to a list, and then inserting that list into CSS as a value for a property.
I'm unsure if it's being inserted incorrectly into the CSS or not being added at all.
$(document).ready(function () {
var checkbox = document.querySelector('[type="checkbox"]');
checkbox.addEventListener('change', function() {
getOTFeaturesTextA();
});
});
function getOTFeaturesTextA(){
var textA = document.getElementById("textA"),
chkArray = [];
$(".ot-textA:checked").each(function() {
chkArray.push($(this).val());
});
var selected;
selected = chkArray.join(',') ;
if(selected.length > 0){
textA.css("font-feature-settings", selected + ", liga");
}else{
textA.css("font-feature-settings", "liga");
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ot-checkboxes">
<p>
<label>
<input type="checkbox" name="frac" value="'frac'" class="ot-textA" id="frac">
Fraction</label>
<br>
<label>
<input type="checkbox" name="aalt" value="'aalt'" class="ot-textA" id="aalt">
Alternatives</label>
<br>
<label>
<input type="checkbox" name="onum" value="'onum'" class="ot-textA" id="onum">
Oldstyle Numbers</label>
</p>
</div>
<div id="textA" contenteditable="true"><span>Trying out checkboxes 3/4 </span></div>