[JQUERY]버튼없는 라디오버튼

버튼 없는 라디오 버튼을 만들고 코드를 간소하게 하려다가 제이쿼리가 작동이 잘 되지 않았다. 여기서 땅을 파다가 스크립트는 문제가 없었다. 라디오버튼 태그가 문제였다...

$(this).css("background", "#ff9c80");
$("div.btn:nth-child(1)").css("background", "#ff9c80");
$('input:radio[id="id"]:checked')
var rslt = $("input: radio[name = 'name']:checked").val();
var rslt = $(e).prev().val();

스크립트 메소드의 변수에 이벤트타겟을 사용하여 값을 불러와 저장메서드에 값을 들고 가면 코드가 복잡해진다. 저장메소드에 바로 선언해서 사용하는편이 간편하다.

var a = $("input[name="name"]:checked").val(); 

버튼 없는 라디오 버튼을 만들기 위해 찾은 답은 label for의 값과 input 태그의 name나 id 값이 같아야하며 서로 각자 다른 값을 가지고 있어야 한다는 것이다. 그래야 스크립트로 값을 가지고 올 수 있다.

@for (var i = 0; i < Model.Json.Count; i++)
{
<input type="radio" name="rslt" value="@Model.Json[i].a" id="rslt_@i">
<label for="rslt_@i">@Model.Json[i].a</label>
}

css가 엉망이지만 좀 더 가독성이 좋도록 공부를 해야겠다.

.btn input[type=radio]{
    display: none;
}
.btn input[type=radio] + label {
    background-color: #fff;
    color: #333;
}
.btn input[type=radio]:nth-child(1) + label {
    border: 2px solid #ff9c80;
    padding: 0.15em 1.2rem;
    border-radius: 40px;
    margin-right: 10px;
    font-size: 1.4rem;
}
.btn input[type=radio]:nth-child(1):checked + label {
    background-color: #ff9c80;
    color:#fff;
}

.btn input[type=radio]:nth-child(3) + label {
    border: 2px solid #ff7b56;
    padding: 0.15em 1.2rem;
    border-radius: 40px;
    margin-right: 10px;
    font-size: 1.4rem;
}
.btn input[type=radio]:nth-child(3):checked + label {
    background-color: #ff7b56;
    color:#fff;
}
.btn input[type=radio]:nth-child(5) + label {
    border: 2px solid #ff5b2c;
    padding: 0.15em 1.2rem;
    border-radius: 40px;
    margin-right: 10px;
    font-size: 1.4rem;
}
.btn input[type=radio]:nth-child(5):checked + label {
    background-color: #ff5b2c;
    color:#fff;
}
.btn input[type=radio]:nth-child(7) + label {
    border: 2px solid #cc4823;
    padding: 0.15em 1.2rem;
    border-radius: 40px;
    margin-right: 10px;
    font-size: 1.4rem;
}
.btn input[type=radio]:nth-child(7):checked + label {
    background-color: #cc4823;
    color:#fff;
}

Html->script->css 순서로 구상한다. Html은 div 태그로 구분을 둔다.

참조
jQuery 입문 | 요소의 탐색 | 형제 요소의 탐색 .siblings() .next() .prev()