JSFiddle - React, Tailwind, and code Playground

by noblood

HTML

<ul>
    <li>
        <label class="label">checkbox list</label>
        <span class="checkboxlist">    
            <label><input value="1" id="multiChk12610394" data-multihid="multiChkHid12610394" type="checkbox" onchange="checkMe(this);"/> 1</label>
            <label><input value="2" id="multiChk12610394" data-multihid="multiChkHid12610394" type="checkbox" onchange="checkMe(this);"/> 2</label>
            <label><input value="3" id="multiChk12610394" data-multihid="multiChkHid12610394" type="checkbox" onchange="checkMe(this);"/> 3</label>
        </span>
        <input value="" id="multiChkHid12610394" type="hidden" />
    </li>
    <li>   
        <label class="label">one</label>
        <input value="1" id="multiChk126103943" data-inputhid="multiChkHid126103943" type="checkbox" class="checkbox" onchange="checkMe(this);"/>
        <input value="" id="multiChkHid126103943" type="hidden" />
    </li>
    <li>   
        <label class="label">radio list</label>
        <span class="radiolist"> 
            <label><input value="one" id="multiChk1261039436" data-inputhid="multiChkHid1261039436" type="radio" name="one" checked="checked" onchange="updateRadio(this)"/> one</label>
            <label><input value="two" id="multiChk1261039436" data-inputhid="multiChkHid1261039436" type="radio" name="one" onchange="updateRadio(this)"/> two</label>
       </span>
        <input value="one" id="multiChkHid1261039436" type="hidden" />
    </li>
     <li>
        <label class="label">select list</label>
        <select id="ddl12610396" name="ddl12610396" data-dropdownhid="ddlHid12610396" class="dropdown" onchange="updateDropdown(this)">    
            <option>--select</option>
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
        <input value="" id="ddlHid12610396" type="hidden" />
    </li>
</ul>

JavaScript

var checkMe = function(id) {
    
        var thisId = $(id).attr('id');
        var multiHid = $(id).attr('data-multihid');
        var inputHid = $(id).attr('data-inputhid');
        var hidHasBeenCleared = false;
        
        if(typeof multiHid !== 'undefined' && multiHid !== false) {
           $("input[data-multihid='" + multiHid +"']").each(function() {
                if (hidHasBeenCleared == false) {
                    //clear the value of the hidden field
                    $('#' + multiHid).attr('value', '');
                    hidHasBeenCleared = true;
                }
                
                if ($(this).is(':checked')) {
                    if ($(this).attr('id') == thisId) {
                        var chkVal = $('#' + multiHid).attr("value");
                        if (chkVal === '') {
                            $('#' + multiHid).appendAttr("value", $(this).val());
                        }
                        else {
                            $('#' + multiHid).appendAttr("value", ";" + $(this).val());
                        }
                    }
                }         
            });
        } else if (typeof inputHid !== 'undefined' && inputHid !== false) {
            $('#' + inputHid).val(($(id).is(':checked')) ? "1" : "0");   
        }
}

var updateRadio = function(id) {
    var inputHid = $(id).attr('data-inputhid');
    
    if(typeof inputHid !== 'undefined' && inputHid !== false) {
        $('#' + inputHid).val(($(id).is(':checked')) ?  $(id).val() : "");   
    }
}

var updateDropdown = function(id) {
    var dropdownHid = $(id).attr('data-dropdownhid');
        if(typeof dropdownHid !== 'undefined' && dropdownHid !== false) {
            $('#' + dropdownHid).val($(id).val());   
        }
}

$.fn.appendAttr = function (attrName, suffix) {
    this.attr(attrName, function (i, val) {
        return val + suffix;
    });
    return this;
};

$(document).ready(function(){ 
    /*
   ...