라디오 버튼에 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
이렇게 해서 원하시는 것이 뭔지 말씀해 주시면
더 좋은 방법이 있을 수 있습니다.
1. 글을 쓸때 배경이미지를 선택하고 글을 씁니다.
2. View에서 글과 선택 했던 배경이미지가 같이 출력 되게끔 하고 싶습니다 선생님
type=radio
를 쓰면 딱인 거 같은데 왜 name을 다르게 하는지 이해가 안 가서요.
넵 이 방법은 포기해야겠네요 ㅠ
<input name이 다르게 하시길 원하시면 type=checkbox로
같으면 type=radio로 하시고
기능이 잘 동작하면
나머지는 JavaScript로 보완 가능합니다.
<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>
