Div box as dynamic form element

by Akram kamal

HTML

<form>
    <label class=box>
        <input name=box type=radio value=1>
    </label>
    <label class=box>
        <input name=box type=radio value=2>
    </label>
    <label class=box>
        <input name=box type=radio value=2>
    </label>

</form>

CSS

.box {
    height: 400px;
    width: 256px;
    border-radius: 10px;
    border: thin solid #86939e;
    display: block;
}

.box.selected {
    border: thin solid #7dc855;
}

.box [name=box] {
    display: none
}

JavaScript

$(".box").change(function(e) {
	$(".selected",this.form).not(this).removeClass("selected")
    console.log($(this.form).serialize())
    $(this).toggleClass("selected", e.target.checked)
})