JSFiddle - React, Tailwind, and code Playground

by kimberwarden

HTML

<form id="ListTypes">

  <label for "basicList"><input type="radio" id="basicList" class="checkbox" name="article_format" value="basiclist"/>Basic List</label>
  <label for "accordionList"><input type="radio" id="accordionList" class="checkbox" name="article_format" value="accordionlist"/>Accordion List</label>
  <label for "internalOnly"><input type="checkbox" id="internalOnly" class="checkbox" name="article_type" value="internalonly" />Internal Use Only</label>
</form>

<div class="single-article-content">
  List Type: <span id="type"></span>
</div>

CSS

input{
  margin:20px;
}

.single-article-content.basiclist {
  color:red;
}
.single-article-content.accordionlist {
  border: 2px blue solid;
}
.single-article-content.internalonly {
  background-color:pink;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
 
 var checkboxes = document.getElementsByClassName('checkbox');
   
 var listType = document.getElementsByClassName('single-article-content');

  for (var i = 0; i < checkboxes.length; i++) {
	
    checkboxes[i].addEventListener('click', function() {
  
    		var toggleClass = event.currentTarget.value;
        listType[0].classList.toggle(toggleClass);
        //listType[0].classList.add(toggleClass);
          
        var spanType  = document.getElementById("type");
        spanType.innerText = toggleClass; 

    });
  }
});