Defining a radio group

by vi161

HTML

<form  method="POST" class="sel-rad">


<label><input class="rad rad-y" type="radio" name="rad1" checked >
<div class="quad"><div class="krest">&#10006;</div></div>
                    <div class="rad-txt">YES</div>
                </label>
                <label><input class="rad rad-n" type="radio" name="rad1" >
                    <div class="quad"><div class="krest">&#10006;</div></div>
                    <div class="rad-txt">NO</div>
                </label>
                  <label><input class="rad rad-n" type="radio" name="00N4600000CRARy" >
                            <div class="quad"><div class="krest"></div></div>
                            <div class="rad-txt">No</div>
                        </label>
                </form>

CSS

.rad {
  display: none;
}
.krest {
  display: none;
}
.quad {
  width: 30px;
  height: 30px;
  border: 1px solid grey;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rad:checked + .quad>.krest  {
   display: block;
   }

JavaScript

$(document).ready(function(){
    $(".sel-rad").click(function(){
        var chk = "Yes";
        if ($(this).find(".rad-y").prop("checked")) {chk = "Yes"}
        else if ($(this).find(".rad-n").prop("checked")){chk = "No"};
	    $(this).find("select.sel").val(chk);
    });
});