JSFiddle - React, Tailwind, and code Playground

by dekkard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<form id="myform">
    <div>
        Checkboxes:
    </div>
    <div class="codes_block">
        <input type="checkbox" name="code" value="11" />11
        <input type="checkbox" name="code" value="22" />22
        <input type="checkbox" name="code" value="33" />33
        <input type="checkbox" name="code" value="44" />44
        <input type="checkbox" name="code" value="55" />55
    </div>
    <div class="codes_block">
        <input type="checkbox" name="code" value="66" />66
        <input type="checkbox" name="code" value="77" />77
        <input type="checkbox" name="code" value="88" />88
        <input type="checkbox" name="code" value="99" />99
    </div>
    
    <div>
        DESEASE_CODE:
    </div>    
    <div>
        <input type="text" id="desease_code" value="|11||55|"></input>
    </div>
</form>

JavaScript

jQuery(document).ready(function() {
    
    var $checkboxes = $('.codes_block :checkbox');
    var $deseaseCode = $('#desease_code');
    
    // Update '#desease_code' according to the checkboxes selected
    $checkboxes.on('change', function(){
        var desease_code = $checkboxes.filter(':checked')
            .map(function(){
                return '|' + $(this).val() + '|';
            }).get().join('');
        $deseaseCode.val(desease_code);
    });

    // Update checkboxes according to the '#desease_code' value    
    var deseaseCodeToCheckboxes = function() {
        var codes = $deseaseCode.val().split('|');
        $checkboxes.each(function(){
            if ( $.inArray( $(this).val(), codes ) !== -1 ) {
                $(this).prop('checked', true);
            }
        });
    };
    
    // Update on load
    deseaseCodeToCheckboxes();

    // Update on input change    
    $deseaseCode.on('input', deseaseCodeToCheckboxes);
});