라디오 버튼에 name 중복 안하고 개별 선택 가능할까요?
본문
<div class="d-flex flex-column">
<input type="radio" name="wr_1" onclick="ChangeColor('1');" style="cursor:pointer;" value="봄"<?php echo ($write['wr_1'] == "봄") ? " checked" : "";?> > 봄
</div>
<div class="d-flex flex-column">
<input type="radio" name="wr_2" onclick="ChangeColor('2');" style="cursor:pointer;" value="여름"<?php echo ($write['wr_2'] == "여름") ? " checked" : "";?> > 여름
</div>
<div class="d-flex flex-column">
<input type="radio" name="wr_3" onclick="ChangeColor('3');" style="cursor:pointer;" value="가을"<?php echo ($write['wr_3'] == "가을") ? " checked" : "";?> > 가을
</div>
<div class="d-flex flex-column">
<input type="radio" name="wr_4" onclick="ChangeColor('4');" style="cursor:pointer;" value="겨울"<?php echo ($write['wr_4'] == "겨울") ? " checked" : "";?> > 겨울
</div>
이런식으로 라디오 버튼 4개를 만들었는데요. name이 각각 달라서 중복체크가
되더라구요. 그래서 name을 똑같이 만드니 view에서 4개가 한번에 출력이
되서 문제가 되네요.
name 속성 다르게 하면서 중복 체크 안되는 방법이 있을까요??
답변 3
이렇게 해서 원하시는 것이 뭔지 말씀해 주시면
더 좋은 방법이 있을 수 있습니다.
<script>
$('input[type=radio][name^=wr]').on('change', function() {
$('input[type=radio][name^=wr]:checked').not(this).prop('checked', false);
});
</script>
ChangeColor 라는 함수가 있네요.
그 함수 안에
for (i = 1; i <= 4; i++) document.getElementsByName("wr_" + i)[0].checked =i == num;
를 보태 넣어줍니다.
여기서 num 은 질문자님께서 넣어주신 매개변수로 바꾸면 됩니다.
<script>
function ChangeColor(num) {
.
.
.
for (i = 1; i <= 4; i++) document.getElementsByName("wr_" + i)[0].checked = i == num;
}
</script>