JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<div class = "noticia">
    <input type = "checkbox" name = "foo" /> Foo
    <input type = "checkbox" name = "bar" /> Bar
    <input type = "checkbox" name = "bin" /> Bin
    <input type = "checkbox" name = "baz" /> Baz
</div>
<label id = "check">Comprobar</label>
<div id = "out"></div>

CSS

label{
    background: lightgreen;
    color: steelblue;
    cursor: pointer;
    border-radius: .5rem;
    padding: .2rem;
    border: .1rem orange solid;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: background .5s, color .5s;
}

label:active{
    top: 9%;
}

label:hover{
	background: steelblue;
	color: lightgreen;
}

#out{
    background: azure;
    border: .1rem lightgray solid;
    border-radius: .5rem;
    width: 27.5%;
    margin-top: 5%;
    color: navy;
    text-align: center;
}

JavaScript

var contenido, mensaje;
$("#check").on("click", function(){
    $("#out").html(null);
    $(".noticia :checkbox").each(function(){
        contenido = $("#out").html();
        mensaje = this.checked ? 
                  "El checkbox " + this.name + " se encuentra marcado.<br />" : 
                  "El checkbox " + this.name + " no se encuentra marcado.<br />";
        $("#out").html(contenido + mensaje);
    });
});