JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--Add your own HTML!-->
<h1>Wybierz pokój do wynajęcia</h1>
<p>Zaznacz odpowiednie pola</p>
<form>
Imię <input id='sprawdz' type='text' ></input><br>
Naziwsko <input id='sprawdz2' type='text'></input><br>
Liczba łóżek<br>
1<input type='checkbox'><br>
2<input type='checkbox'><br>
3<input type='checkbox'><br>
4<input type='checkbox'><br>
5<input type='checkbox'><br>
<input id='submit' type='submit'>
CSS
/* Add your CSS below! */
body {
background-color: skyblue;
}
p {
color: blue;
}
.kierwasz {
border: 5px solid red;
}
.ok {
background-image: url('http://www.clipartbest.com/cliparts/pT5/L46/pT5L46bTB.png');
}
.notok {
background-image: url('http://www.kylintv.com/kylintv/marketing/images/why-kylintv/cross.png');
}
JavaScript
// Add your JavaScript below!
$(document).ready(function(){
var check = function(){
//$(event.target).addClass('kierwasz');
$(this).empty(); //czego bym tu nie użył to nie dziala -_-
if(typeof($(this).val())==='string' && $(this).val().length>1){
$(this).after("<img height='10px' width='10px' src='http://www.clipartbest.com/cliparts/pT5/L46/pT5L46bTB.png'>")}else{
$(this).after("<img height='10px' width='10px' src='http://www.kylintv.com/kylintv/marketing/images/why-kylintv/cross.png'>");}
}
$('#sprawdz').change(check);
$('#sprawdz2').change(check);
});