JSFiddle - React, Tailwind, and code Playground

by alexbfree

HTML

<input type="radio" name="test" value="1" /> test<br/>
<input type="radio" name="test" value="2" /> test 2<br/>
<input type="radio" name="test" value="3" /> test 3<br />
<hr />
<input type="checkbox" name="hello" value="world" /> hello world<br/>
<input type="checkbox" name="hello" value="foobar" />hello foobar <br/>
<hr />
<!-- <select name="dropdown" id="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select> -->
<hr />
<select name="multiple_dropdown" id="dropdown_2" multiple="multiple">
    <option value="11">Eleven</option>
    <option value="22">Twentytwo</option>
</select>
<hr />

JavaScript

var s1 = 'input[type=radio]' //'input[name=test]';
var s2 = 'input[type=checkbox]';
/* var s3 = '#dropdown'; 
var s4 = '#dropdown_2'; */
var s3 = 'select';

var $s1 = $(s1);
var $s2 = $(s2);
var $s3 = $(s3);
/*var $s4 = $(s4);*/


var callback = function($sObj) {    
    return function() {
        console.log($sObj);
        // Seems it's IMPOSSIBLE to properly behave the same way
        // with selects and inputs :(
        // Doesn't mean we can't cheat in a clean way:
        var $this;
        var newVal;
        newVal = $sObj.val();
        var newState = newVal;
        if (!$sObj.is('select'))
        {
            newState = $sObj.filter(':checked').map(function() { return $(this).val()});
        }
        
        console.log('CHANGE on '+$sObj.attr('name')+': new value is "'+newVal+'" and new state is ');
        console.log(newState); 
        
        /*console.log('full values are ');
        if ($sObj.is('input'))
        {      console.log($sObj.siblings('[name='+$sObj.attr('name')+']:checked').map(function() {return $(this).val()}));
        }
        else
        {
            console.log($sObj.val());
        }*/
        
/*        if ($sObj.children('option').length > 0) {
            console.log('Form element has option tags');
            // $this points to <option> tag
            $this = $sObj.children('[value="' + $(this).val() + '"]');
        } else {
            // $this points to <input> tag
            $this = $(this);
        }   
        
        if ($sObj.is(':checked') || $sObj.children('option').is(':selected')) {
            console.log('The selector has an item that is checked');
        } else {
            console.log('The selector has no items that are checked');
        }
        
        if ($this.is(':checked') || $this.is(':selected')) {
            console.log('This specific item is checked');
        } else {
            console.log('This specific item is not checked');
        }
        
        
        if...