JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<form>
    <input type="radio" name="r" value="a" />
    <input type="radio" name="r" value="b" />
    <input type="radio" name="r" value="c" />
</form>

<form>
    <input type="radio" name="r" value="a" />
    <input type="radio" name="r" value="b" />
    <input type="radio" name="r" value="c" />
</form>

<form>
    <input type="radio" name="r" value="a" />
    <input type="radio" name="r" value="b" />
    <input type="radio" name="r" value="c" />
</form>


<form>
    <input type="checkbox" name="c" value="a" />
    <input type="checkbox" name="c" value="b" />
    <input type="checkbox" name="c" value="c" />
</form>

<form>
    <input type="checkbox" name="c" value="a" />
    <input type="checkbox" name="c" value="b" />
    <input type="checkbox" name="c" value="c" />
</form>

<form>
    <input type="text" name="t" value="a" />
    <input type="text" name="t" value="b" />
    <input type="text" name="t" value="c" />
</form>

<form>
    <input type="text" name="t" value="a" />
    <input type="text" name="t" value="b" />
    <input type="text" name="t" value="c" />
</form>

JavaScript

function mirror($this){
    var matches = $("input[name='"+$this.attr("name")+"'][value='"+$this.attr("value")+"']");
    if($this.attr("type")=="text"){
        matches.val($this.val());
    } else {
        matches.prop("checked", $this.prop("checked"));
    }
}


$(function(){
    
 
    
    //radios
    $("input[name='r']").on('change', function() {
        mirror($(this));
    });
    //checkboxes
    $("input[name='c']").on('change', function() {
        mirror($(this));
    });
    //text
    $("input[name='t']").on('change keyup', function() {
        mirror($(this));
    });
    
    
    
});