고수님들 코드좀 봐주세요.
본문
아래 코드 좀 심플하게 만들어 주세요.
3번 문항을 체크 완료 후 4번으르 넘어갈때 3번 문항 hidden wr_3 값에 체크된 값이
모두 입력되는 구조입니다.
코드는 작동되나 너무 길고 중복항목이 많아 심플하게 만들 수 없을까요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comwrbtible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container ps-5 my-5">
<p>1. 1번문항 wr_1 에 저장</p>
<p>2. 2번문항 wr_2 에 저장</p>
<p>3. 관련된 아이템을 모두 체크한 후 별점을 주세요. wr_3 에 저장</p>
<?php for($xx=1; $xx<6; $xx++) { ?>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="wrb_<?=$xx?>" id="wrb<?= $xx ?>_<?=$xx ?>" value="아이템 <?=$xx?>" onclick='toggleTextbox<?=$xx?>(<?=$xx?>,this)'>
<label class="form-check-label" for="wrb<?= $xx ?>_<?=$xx ?>">아이템 <?=$xx?></label>
</div>
<?php for($x=5; $x>0; $x--) { ?>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="wrd_<?= $xx ?>" id="wrd<?= $xx ?>_<?=$xx ?>" value="<?= $x ?>" disabled onclick='getCheck<?=$xx?>(<?=$xx?>)'>
<label class="form-check-label" for="wrd<?= $xx ?>_<?=$xx ?>"><?= str_repeat("☆", $x) ?></label>
</div>
<?php } ?>
<input type="hidden" id="wrk_<?=$xx?>" name="wrka[]" value="">
<script>
function getCheck<?=$xx?>(id) {
var val1 = "";
var val2 = "";
var val3 = "";
val1 = $("input[name=wrb_"+id+"]:checked").val();
$("input[name=wrd_"+id+"]").each(function() {
val2 = $("input[name=wrd_"+id+"]:checked").val();
});
val1 = val1 + "|" + val2;
$("#wrk_"+id).val(val1);
$("input[name='wrka[]']").each(function(idx){
if($(this).val()) {
val3 = val3+"|"+$(this).val();
}
});
$('#wr_val').val(val3);
}
function toggleTextbox<?=$xx?>(id,checkbox) {
var val3 = "";
var chkok = "";
if($("input[name=wrb_"+id+"]").is(":checked")) {
$("input[name=wrd_"+id+"]").each(function() {
$(this).prop('disabled', false); //활성
});
$("input[name=wrd_"+id+"]").each(function(idx) {
chkok = $(this).val();
});
console.log(chkok);
if(chkok==1) {
alert("별점을 한개 체크해 주세요.");
}
} else {
$("input[name=wrd_"+id+"]").each(function() {
$(this).prop('disabled', true); //비활성
$("input[name=wrd_"+id+"]").each(function() {
$("input[name=wrd_"+id).prop("checked", false);
});
});
$("#wrk_"+id).val('');
$("input[name='wrka[]']").each(function(idx){
if($(this).val()) {
val3 = val3+"|"+$(this).val();
}
});
$('#wr_val').val(val3);
}
}
</script>
</div>
<?php } ?>
<input type="hidden" id="wr_val" name="wr_3" value="">
<br>
<p>4. 4번문항 wr_4 에 저장</p>
</div>
</body>
</html>
답변 4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comwrbtible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function getCheck(id) {
var val1 = "";
var val2 = "";
var val3 = "";
val1 = $("input[name=wrb_"+id+"]:checked").val();
$("input[name=wrd_"+id+"]").each(function() {
val2 = $("input[name=wrd_"+id+"]:checked").val();
});
val1 = val1 + "|" + val2;
$("#wrk_"+id).val(val1);
$("input[name='wrka[]']").each(function(idx){
if($(this).val()) {
val3 = val3+"|"+$(this).val();
}
});
$('#wr_val').val(val3);
}
function toggleTextbox(id,checkbox) {
var val3 = "";
var chkok = "";
if($("input[name=wrb_"+id+"]").is(":checked")) {
$("input[name=wrd_"+id+"]").each(function() {
$(this).prop('disabled', false); //활성
});
$("input[name=wrd_"+id+"]").each(function(idx) {
chkok = $(this).val();
});
console.log(chkok);
if(chkok==1) {
alert("별점을 한개 체크해 주세요.");
}
} else {
$("input[name=wrd_"+id+"]").each(function() {
$(this).prop('disabled', true); //비활성
$("input[name=wrd_"+id+"]").each(function() {
$("input[name=wrd_"+id).prop("checked", false);
});
});
$("#wrk_"+id).val('');
$("input[name='wrka[]']").each(function(idx){
if($(this).val()) {
val3 = val3+"|"+$(this).val();
}
});
$('#wr_val').val(val3);
}
}
</script>
</head>
<body>
<div class="container ps-5 my-5">
<p>1. 1번문항 wr_1 에 저장</p>
<p>2. 2번문항 wr_2 에 저장</p>
<p>3. 관련된 아이템을 모두 체크한 후 별점을 주세요. wr_3 에 저장</p>
<?php for($xx=1; $xx<6; $xx++) { ?>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="wrb_<?=$xx?>" id="wrb<?= $xx ?>_<?=$xx ?>" value="아이템 <?=$xx?>" onclick='toggleTextbox(<?=$xx?>,this)'>
<label class="form-check-label" for="wrb<?= $xx ?>_<?=$xx ?>">아이템 <?=$xx?></label>
</div>
<?php for($x=5; $x>0; $x--) { ?>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="wrd_<?= $xx ?>" id="wrd<?= $xx ?>_<?=$xx ?>" value="<?= $x ?>" disabled onclick='getCheck(<?=$xx?>)'>
<label class="form-check-label" for="wrd<?= $xx ?>_<?=$xx ?>"><?= str_repeat("☆", $x) ?></label>
</div>
<?php } ?>
<input type="hidden" id="wrk_<?=$xx?>" name="wrka[]" value="">
</div>
<?php } ?>
<input type="hidden" id="wr_val" name="wr_3" value="">
<br>
<p>4. 4번문항 wr_4 에 저장</p>
</div>
</body>
</html>
잘 됩니다. 쉬시는 날에 도움 주셔서 감사드립니다.
<!-- 별점 반복문 -->
<div class="group">
<div class="check">
<input type="checkbox1" class="chk" id="chk">
<label for="chk">아이템 체크박스1</lable>
</div>
<div class="radio">
<input type="radio" class="rdo" id="rdo1">
<label for="rdo1">별점 라디오1</lable>
<input type="radio" class="rdo" id="rdo2">
<label for="rdo2">별점 라디오2</lable>
<input type="radio" class="rdo" id="rdo3">
<label for="rdo3">별점 라디오2</lable>
<input type="radio" class="rdo" id="rdo4">
<label for="rdo4">별점 라디오2</lable>
<input type="radio" class="rdo" id="rdo5">
<label for="rdo5">별점 라디오2</lable>
</div>
</div>
<!-- 별점 반복문 -->
<script>
$(document).on('click','.chk',function() {
var $this = $(this),
$wrap = $this.closest('.group');
if($this.prop('checked') === true) {
$wrap.find('.rdo').prop('disable',false);
} else {
$wrap.find('.rdo').prop('disable',true);
}
});
//폼 전송시 체크
var is_break = false;
var wr_3 = [];
$.each($('.chk'),function(i,$i) {
var $wrap = $(this).closest('.group');
if($(this).prop('checked') == true) {
if($wrap.find('.rdo:checked').length == 0) {
alert('아이템 별점을 체크해 주세요');
is_break = true;
return false;
} else {
var chk_val = $(this).val();
var rdo_val = $wrap.find('.rdo:checked').val();
var value = chk_val+'|'+rdo_val;
wr_3.push(value);
}
} else { //체크박스 선택되지 않음
alert('아이템 별점을 체크해 주세요');
is_break = true;
return false;
}
});
if(is_break == true) {
return false;
}
var wr_3_val = wr_3.join(',');
$('#wr_3').val(wr_3_val);
return true;
</script>
위와 같은 형태는 어떨까요?
별점을 클릭시 마다 함수를 실행하는 형태가 아니고,
폼 전송 전에 체크하는 방식으로 하면 어떨까 싶습니다.
감사합니다. 공부 좀 해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comwrbtible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container ps-5 my-5">
<p>1. 1번문항 wr_1 에 저장</p>
<p>2. 2번문항 wr_2 에 저장</p>
<p>3. 관련된 아이템을 모두 체크한 후 별점을 주세요. wr_3 에 저장</p>
<?php for ($xx = 1; $xx < 6; $xx++) { ?>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="wrb_<?= $xx ?>" id="wrb<?= $xx ?>_<?= $xx ?>" value="아이템 <?= $xx ?>" onclick='toggleTextbox<?= $xx ?>(<?= $xx ?>,this)'>
<label class="form-check-label" for="wrb<?= $xx ?>_<?= $xx ?>">아이템 <?= $xx ?></label>
</div>
<?php for ($x = 5; $x > 0; $x--) { ?>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="wrd_<?= $xx ?>" id="wrd<?= $xx ?>_<?= $xx ?>" value="<?= $x ?>" disabled onclick='getCheck<?= $xx ?>(<?= $xx ?>)'>
<label class="form-check-label" for="wrd<?= $xx ?>_<?= $xx ?>"><?= str_repeat("☆", $x) ?></label>
</div>
<?php } ?>
<input type="hidden" id="wrk_<?= $xx ?>" name="wrka[]" value="">
<script>
function getCheck<?= $xx ?>(id) {
var val1 = "";
var val2 = "";
var val3 = "";
val1 = $("input[name=wrb_" + id + "]:checked").val();
$("input[name=wrd_" + id + "]").each(function() {
val2 = $("input[name=wrd_" + id + "]:checked").val();
});
val1 = val1 + "|" + val2;
$("#wrk_" + id).val(val1);
$("input[name='wrka[]']").each(function(idx) {
if ($(this).val()) {
val3 = val3 + "|" + $(this).val();
}
});
$('#wr_val').val(val3);
}
function toggleTextbox<?= $xx ?>(id, checkbox) {
var val3 = "";
var chkok = "";
if ($("input[name=wrb_" + id + "]").is(":checked")) {
$("input[name=wrd_" + id + "]").each(function() {
$(this).prop('disabled', false); //활성
});
$("input[name=wrd_" + id + "]").each(function(idx) {
chkok = $(this).val();
});
console.log(chkok);
if (chkok == 1) {
alert("별점을 한개 체크해 주세요.");
}
} else {
$("input[name=wrd_" + id + "]").each(function() {
$(this).prop('disabled', true); //비활성
$("input[name=wrd_" + id + "]").each(function() {
$("input[name=wrd_" + id).prop("checked", false);
});
});
$("#wrk_" + id).val('');
$("input[name='wrka[]']").each(function(idx) {
if ($(this).val()) {
val3 = val3 + "|" + $(this).val();
}
});
$('#wr_val').val(val3);
}
}
</script>
</div>
<?php } ?>
<input type="hidden" id="wr_val" name="wr_3" value="">
<br>
<p>4. 4번문항 wr_4 에 저장</p>
</div>
</body>
</html>
빠른 답변 감사드립니다.
문제가 위 스크립트가 항목별로 실행되다 보니 스트립트가 5번이나 소스에 보입니다.
스크립트 한번 만 사용해서 5개 항목을 모두 처리할 수 있는 방법이 없을까요.
다음과 같이 해보시는건 어떨까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comwrbtible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container ps-5 my-5">
<?php for($xx=1; $xx<6; $xx++) { ?>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="wrb_<?=$xx?>" id="wrb<?= $xx ?>_<?=$xx ?>"
value="아이템 <?=$xx?>" onclick='toggleTextbox(this)'>
<label class="form-check-label" for="wrb<?= $xx ?>_<?=$xx ?>">아이템 <?=$xx?></label>
</div>
<?php for($x=5; $x>0; $x--) { ?>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="wrd_<?= $xx ?>" id="wrd<?= $xx ?>_<?=$x ?>"
value="<?= $x ?>" disabled onclick='getCheck(<?=$xx?>)'>
<label class="form-check-label" for="wrd<?= $xx ?>_<?=$x ?>"><?= str_repeat("☆", $x) ?></label>
</div>
<?php } ?>
<input type="hidden" id="wrk_<?=$xx?>" name="wrka[]" value="">
</div>
<?php } ?>
<input type="hidden" id="wr_val" name="wr_3" value="">
<br>
<p>4. 4번문항 wr_4 에 저장</p>
</div>
<script>
function getCheck(id) {
var val1 = "";
var val2 = "";
var val3 = "";
val1 = $("input[name=wrb_" + id + "]:checked").val();
$("input[name=wrd_" + id + "]").each(function () {
val2 = $("input[name=wrd_" + id + "]:checked").val();
});
val1 = val1 + "|" + val2;
$("#wrk_" + id).val(val1);
$("input[name='wrka[]']").each(function (idx) {
if ($(this).val()) {
val3 = val3 + "|" + $(this).val();
}
});
$('#wr_val').val(val3);
}
function toggleTextbox(checkbox) {
var val3 = "";
var id = checkbox.id.split('_')[0];
if (checkbox.checked) {
$("input[name=wrd_" + id + "]").each(function () {
$(this).prop('disabled', false); //활성
});
var chkok = $("input[name=wrd_" + id + "]").filter(':checked').val();
console.log(chkok);
if (chkok == 1) {
alert("별점을 한개 체크해 주세요.");
}
} else {
$("input[name=wrd_" + id + "]").each(function () {
$(this).prop('disabled', true); //비활성
$("input[name=wrd_" + id + "]").prop("checked", false);
});
$("#wrk_" + id).val('');
$("input[name='wrka[]']").each(function (idx) {
if ($(this).val()) {
val3 = val3 + "|" + $(this).val();
}
});
$('#wr_val').val(val3);
}
}
</script>
</body>
</html>
이렇게 하면 하나의 스크립트 함수로 5개의 항목을 처리할 수 있을것 같습니다
감사드립니다. 스크립트가 아래 있으니 체크시 라디오박스가 활성이 안됩니다.
답변을 작성하시기 전에 로그인 해주세요.
