JSFiddle - React, Tailwind, and code Playground

by Rajeswaritest

HTML

<div style="width: 100%;">
  <input type="text" tabindex="0" value="hello"/>
 </div>

<div><div><a id="chkPref" role="switch" aria-checked="false" aria-disabled="false" aria-label="No" onclick="javascript:changeCheckbox(this)" href="javascript:;">Yes</a><span id="chkPrefSpan">No</span><input tabindex="-1" aria-hidden="true" type="checkbox" data-role="flipswitch"></div><span role="alert" aria-hidden="true" aria-live="assertive" style="position: absolute; max-height: 1px; max-width: 1px; opacity: 0;">No</span></div>

<div style="width: 100%;">
  <input type="text" tabindex="0" value="hello"/>
  </div>

JavaScript

function changeCheckbox(event) {

    let item = document.getElementById('chkPref');
    
    switch(item.getAttribute('aria-checked')) {
        case "true":
            item.setAttribute('aria-checked', "false");
            item.setAttribute('aria-label', "No");
					  document.getElementById('chkPrefSpan').innerText="No" 
            item.setAttribute('class', "ui-flipswitch ui-shadow-inset ui-bar-c crm-jqm-flipswitch-wrapper ui-corner-all white");
            
            
            break;
        case "false":
            item.setAttribute('aria-checked', "true");
            item.setAttribute('aria-label', "Yes");
            item.setAttribute('class', "ui-flipswitch ui-shadow-inset ui-bar-c crm-jqm-flipswitch-wrapper ui-corner-all green");
           document.getElementById('chkPrefSpan').innerText="Yes" 
            break;
    }
}