JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div class="left">
<form id="myform">
    <label for="check1">Check 1</label>
    <input id="check1" type="checkbox" name="check1" value="check1" /><br/>
    <label for="check2">Check 2</label>
    <input id="check2" type="checkbox" name="check2" value="check2" /><br/>
</form>
<script id="template" type="text/template">
    <label for="check{n}">Check {n}</label>
    <input id="check{n}" type="checkbox" name="check{n}" value="check{n}"/>
    <br/>
</script> 
<input type="button" id="add" value="Add another" />
<input type="button" id="toggle" value="Toggle 1" />
</div>
<div class="right">
    <div id="output">
    </div>
</div>

CSS

.left, .right{
    width: 50%;
    float: left;
}

JavaScript

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

// For testing of dynamically added elements
$('#add').click(function () {
    $('#myform').append($('#template').html().replace(/\{n\}/g, $('#myform label').length+1));
});

$('#toggle').click(function () {
    var $cb = $('#myform :checkbox:first');
    $cb.prop('checked', !$cb.prop('checked')).triggerHandler('change');
});

console.log = function(message){
    $('#output').append(message + "<br/>");
}