📖
마지막으로 선택한 라디오 버튼을 유지하는 방법
페이지 정보
본문
사용자가 선택한 라디오 버튼을 페이지가 새로고침되거나 다시 방문해도 유지하려면,
쿠키 또는 localStorage를 사용하여 선택 값을 저장하고 복원하면 됩니다.
방법 1: JavaScript + localStorage 이용 (추천)
이 방법을 사용하면 서버 코드(PHP) 수정 없이 클라이언트 측에서 선택한 값을 저장하고, 페이지가 다시 로드될 때 자동으로 적용할 수 있습니다.
✅ JavaScript 코드 추가[code]<script>
document.addEventListener("DOMContentLoaded", function () {
const radioButtons = document.querySelectorAll('input[name="wr_2"]');
// 저장된 값 가져오기
const savedValue = localStorage.getItem("selected_wr_2");
if (savedValue) {
// 저장된 값과 같은 값을 가진 라디오 버튼을 체크
document.querySelector(`input[name="wr_2"][value="${savedValue}"]`).checked = true;
}
// 라디오 버튼이 변경될 때 저장
radioButtons.forEach(radio => {
radio.addEventListener("change", function () {
localStorage.setItem("selected_wr_2", this.value);
});
});
});
</script>
<div class="radio_input">
<form method="post">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
세로영상(9:16)
</label>
</form>
</div>[/code]📌 동작 방식
페이지가 로드될 때 localStorage에서 마지막으로 선택한 wr_2 값을 가져와서 체크된 상태로 설정.
사용자가 라디오 버튼을 변경하면 해당 값을 localStorage에 저장.
페이지가 새로고침되거나 다시 방문해도 마지막 선택이 유지됨.
방법 2: PHP + 쿠키 사용
만약 서버 측에서 저장해야 하는 경우, PHP의 setcookie()를 사용하여 유지할 수 있습니다.
✅ PHP 코드 추가
setcookie()를 사용하여 선택한 값을 저장하고, 다음 번 페이지 로드 시 유지합니다.[code]<?php
// 쿠키에서 이전 선택 값을 가져옴
$selected_wr2 = isset($_COOKIE['selected_wr_2']) ? $_COOKIE['selected_wr_2'] : '1';
// 사용자가 선택한 값을 저장
if (isset($_POST['wr_2'])) {
$selected_wr2 = $_POST['wr_2'];
setcookie('selected_wr_2', $selected_wr2, time() + (86400 * 30), "/"); // 30일 유지
}
?>
<div class="radio_input">
<form method="post">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
세로영상(9:16)
</label>
</form>
</div>[/code]📌 동작 방식
쿠키에서 선택 값을 가져와 $selected_wr2에 저장.
라디오 버튼 선택 시 onchange="this.form.submit();"으로 자동 제출, 선택한 값이 쿠키에 저장됨.
페이지가 새로고침되거나 다시 방문해도 마지막 선택이 유지됨.
📌 권장:
일반적인 웹사이트라면 localStorage 방식(JavaScript) 사용 (빠르고 간편).
로그인 사용자와 관련된 설정이라면 PHP + 쿠키 방식 사용.
위 방법을 적용하면 마지막으로 선택한 라디오 버튼을 유지할 수 있습니다!
조건: wr_2 값이 없을 때만 마지막 선택 유지
✅ wr_2 값이 없을 때만 마지막으로 선택한 값을 유지하고,
✅ wr_2 값이 이미 있으면 현재 값을 그대로 사용하려면 PHP와 JavaScript를 조합하면 됩니다.
방법 1: JavaScript (localStorage) + PHP 값이 없을 때만 유지[code]<?php
// 현재 wr_2 값이 없을 때만 localStorage 값을 적용할지 결정
$selected_wr2 = isset($write['wr_2']) ? $write['wr_2'] : null;
?>
<div class="radio_input">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> />
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> />
세로영상(9:16)
</label>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const radioButtons = document.querySelectorAll('input[name="wr_2"]');
const savedValue = localStorage.getItem("selected_wr_2");
// PHP에서 wr_2 값이 없을 때만 localStorage 값 적용
if ("<?php echo $selected_wr2 === null ? 'true' : 'false'; ?>" === "true" && savedValue) {
document.querySelector(`input[name="wr_2"][value="${savedValue}"]`).checked = true;
}
// 라디오 버튼 변경 시 값 저장
radioButtons.forEach(radio => {
radio.addEventListener("change", function () {
localStorage.setItem("selected_wr_2", this.value);
});
});
});
</script>[/code]🔹 동작 방식
PHP에서 wr_2 값이 없는 경우(null)만 JavaScript가 localStorage 값을 적용함.
wr_2 값이 존재하면 현재 값을 유지하고, localStorage를 무시.
사용자가 라디오 버튼을 변경하면 localStorage에 저장.
방법 2: PHP + 쿠키 (wr_2가 없을 때만 적용)[code]<?php
// 현재 wr_2 값이 있는지 확인
$selected_wr2 = isset($write['wr_2']) ? $write['wr_2'] : (isset($_COOKIE['selected_wr_2']) ? $_COOKIE['selected_wr_2'] : null);
// 선택 값이 없을 때만 쿠키 적용
if (!isset($write['wr_2']) && isset($_COOKIE['selected_wr_2'])) {
$selected_wr2 = $_COOKIE['selected_wr_2'];
}
?>
<div class="radio_input">
<form method="post">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();" />
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();" />
세로영상(9:16)
</label>
</form>
</div>
<?php
// 선택한 값이 있을 경우 쿠키 저장
if (isset($_POST['wr_2'])) {
setcookie('selected_wr_2', $_POST['wr_2'], time() + (86400 * 30), "/"); // 30일 유지
}
?>[/code]🔹 동작 방식
wr_2 값이 있으면 현재 값을 유지.
wr_2 값이 없을 때만 쿠키($_COOKIE['selected_wr_2'])에서 값을 가져옴.
사용자가 선택하면 폼이 자동 제출되며 쿠키가 저장됨.
쿠키는 30일 유지, 사용자가 다시 방문하면 기존 선택이 적용됨.
쿠키 또는 localStorage를 사용하여 선택 값을 저장하고 복원하면 됩니다.
방법 1: JavaScript + localStorage 이용 (추천)
이 방법을 사용하면 서버 코드(PHP) 수정 없이 클라이언트 측에서 선택한 값을 저장하고, 페이지가 다시 로드될 때 자동으로 적용할 수 있습니다.
✅ JavaScript 코드 추가[code]<script>
document.addEventListener("DOMContentLoaded", function () {
const radioButtons = document.querySelectorAll('input[name="wr_2"]');
// 저장된 값 가져오기
const savedValue = localStorage.getItem("selected_wr_2");
if (savedValue) {
// 저장된 값과 같은 값을 가진 라디오 버튼을 체크
document.querySelector(`input[name="wr_2"][value="${savedValue}"]`).checked = true;
}
// 라디오 버튼이 변경될 때 저장
radioButtons.forEach(radio => {
radio.addEventListener("change", function () {
localStorage.setItem("selected_wr_2", this.value);
});
});
});
</script>
<div class="radio_input">
<form method="post">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
세로영상(9:16)
</label>
</form>
</div>[/code]📌 동작 방식
페이지가 로드될 때 localStorage에서 마지막으로 선택한 wr_2 값을 가져와서 체크된 상태로 설정.
사용자가 라디오 버튼을 변경하면 해당 값을 localStorage에 저장.
페이지가 새로고침되거나 다시 방문해도 마지막 선택이 유지됨.
방법 2: PHP + 쿠키 사용
만약 서버 측에서 저장해야 하는 경우, PHP의 setcookie()를 사용하여 유지할 수 있습니다.
✅ PHP 코드 추가
setcookie()를 사용하여 선택한 값을 저장하고, 다음 번 페이지 로드 시 유지합니다.[code]<?php
// 쿠키에서 이전 선택 값을 가져옴
$selected_wr2 = isset($_COOKIE['selected_wr_2']) ? $_COOKIE['selected_wr_2'] : '1';
// 사용자가 선택한 값을 저장
if (isset($_POST['wr_2'])) {
$selected_wr2 = $_POST['wr_2'];
setcookie('selected_wr_2', $selected_wr2, time() + (86400 * 30), "/"); // 30일 유지
}
?>
<div class="radio_input">
<form method="post">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
세로영상(9:16)
</label>
</form>
</div>[/code]📌 동작 방식
쿠키에서 선택 값을 가져와 $selected_wr2에 저장.
라디오 버튼 선택 시 onchange="this.form.submit();"으로 자동 제출, 선택한 값이 쿠키에 저장됨.
페이지가 새로고침되거나 다시 방문해도 마지막 선택이 유지됨.
📌 권장:
일반적인 웹사이트라면 localStorage 방식(JavaScript) 사용 (빠르고 간편).
로그인 사용자와 관련된 설정이라면 PHP + 쿠키 방식 사용.
위 방법을 적용하면 마지막으로 선택한 라디오 버튼을 유지할 수 있습니다!
조건: wr_2 값이 없을 때만 마지막 선택 유지
✅ wr_2 값이 없을 때만 마지막으로 선택한 값을 유지하고,
✅ wr_2 값이 이미 있으면 현재 값을 그대로 사용하려면 PHP와 JavaScript를 조합하면 됩니다.
방법 1: JavaScript (localStorage) + PHP 값이 없을 때만 유지[code]<?php
// 현재 wr_2 값이 없을 때만 localStorage 값을 적용할지 결정
$selected_wr2 = isset($write['wr_2']) ? $write['wr_2'] : null;
?>
<div class="radio_input">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> />
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> />
세로영상(9:16)
</label>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const radioButtons = document.querySelectorAll('input[name="wr_2"]');
const savedValue = localStorage.getItem("selected_wr_2");
// PHP에서 wr_2 값이 없을 때만 localStorage 값 적용
if ("<?php echo $selected_wr2 === null ? 'true' : 'false'; ?>" === "true" && savedValue) {
document.querySelector(`input[name="wr_2"][value="${savedValue}"]`).checked = true;
}
// 라디오 버튼 변경 시 값 저장
radioButtons.forEach(radio => {
radio.addEventListener("change", function () {
localStorage.setItem("selected_wr_2", this.value);
});
});
});
</script>[/code]🔹 동작 방식
PHP에서 wr_2 값이 없는 경우(null)만 JavaScript가 localStorage 값을 적용함.
wr_2 값이 존재하면 현재 값을 유지하고, localStorage를 무시.
사용자가 라디오 버튼을 변경하면 localStorage에 저장.
방법 2: PHP + 쿠키 (wr_2가 없을 때만 적용)[code]<?php
// 현재 wr_2 값이 있는지 확인
$selected_wr2 = isset($write['wr_2']) ? $write['wr_2'] : (isset($_COOKIE['selected_wr_2']) ? $_COOKIE['selected_wr_2'] : null);
// 선택 값이 없을 때만 쿠키 적용
if (!isset($write['wr_2']) && isset($_COOKIE['selected_wr_2'])) {
$selected_wr2 = $_COOKIE['selected_wr_2'];
}
?>
<div class="radio_input">
<form method="post">
<label>
<input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();" />
가로영상(16:9)
</label>
<label>
<input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();" />
세로영상(9:16)
</label>
</form>
</div>
<?php
// 선택한 값이 있을 경우 쿠키 저장
if (isset($_POST['wr_2'])) {
setcookie('selected_wr_2', $_POST['wr_2'], time() + (86400 * 30), "/"); // 30일 유지
}
?>[/code]🔹 동작 방식
wr_2 값이 있으면 현재 값을 유지.
wr_2 값이 없을 때만 쿠키($_COOKIE['selected_wr_2'])에서 값을 가져옴.
사용자가 선택하면 폼이 자동 제출되며 쿠키가 저장됨.
쿠키는 30일 유지, 사용자가 다시 방문하면 기존 선택이 적용됨.
댓글목록
등록된 댓글이 없습니다.
![]() ![]() |