고수님들 코드좀 봐주세요. 채택완료
아래 코드 좀 심플하게 만들어 주세요.
3번 문항을 체크 완료 후 4번으르 넘어갈때 3번 문항 hidden wr_3 값에 체크된 값이
모두 입력되는 구조입니다.
코드는 작동되나 너무 길고 중복항목이 많아 심플하게 만들 수 없을까요.
</strong></p>
<p><!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="<a href="https://code.jquery.com/jquery-3.7.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.0.min.js"></script></a>
<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"</a> rel="stylesheet">
<script src="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></a>
</head>
<body>
<div class="container ps-5 my-5"></p>
<p><p>1. 1번문항 wr_1 에 저장</p>
<p>2. 2번문항 wr_2 에 저장</p></p>
<p><p>3. 관련된 아이템을 모두 체크한 후 별점을 주세요. wr_3 에 저장</p>
<?php for($xx=1; $xx<6; $xx++) { ?></p>
<p> <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></p>
<p> <?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 } ?></p>
<p> <input type="hidden" id="wrk_<?=$xx?>" name="wrka[]" value="">
<script>
function getCheck<?=$xx?>(id) {
var val1 = "";
var val2 = "";
var val3 = "";</p>
<p> val1 = $("input[name=wrb_"+id+"]:checked").val();
$("input[name=wrd_"+id+"]").each(function() {
val2 = $("input[name=wrd_"+id+"]:checked").val();
});
val1 = val1 + "|" + val2;</p>
<p> $("#wrk_"+id).val(val1);</p>
<p> $("input[name='wrka[]']").each(function(idx){
if($(this).val()) {
val3 = val3+"|"+$(this).val();
}
});
$('#wr_val').val(val3);
}</p>
<p> function toggleTextbox<?=$xx?>(id,checkbox) {</p>
<p> var val3 = "";
var chkok = "";</p>
<p> if($("input[name=wrb_"+id+"]").is(":checked")) {</p>
<p> $("input[name=wrd_"+id+"]").each(function() {
$(this).prop('disabled', false); //활성
});</p>
<p> $("input[name=wrd_"+id+"]").each(function(idx) {
chkok = $(this).val();
});
console.log(chkok);
if(chkok==1) {
alert("별점을 한개 체크해 주세요.");
}</p>
<p> } else {</p>
<p> $("input[name=wrd_"+id+"]").each(function() {
$(this).prop('disabled', true); //비활성
$("input[name=wrd_"+id+"]").each(function() {
$("input[name=wrd_"+id).prop("checked", false);
});
});</p>
<p> $("#wrk_"+id).val('');</p>
<p> $("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="">
<p>4. 4번문항 wr_4 에 저장</p></p>
<p></div></p>
<p></body>
</html></p>
<p><strong>
답변 4개
</p>
<p><!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="<a href="https://code.jquery.com/jquery-3.7.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.0.min.js"></script></a>
<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"</a> rel="stylesheet">
<script src="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></a></p>
<p> </p>
<p><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></p>
<p> </p>
<p></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></p>
<p> </p>
<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 } ?></p>
<p> </p>
<p><input type="hidden" id="wr_val" name="wr_3" value="">
<p>4. 4번문항 wr_4 에 저장</p>
</div>
</body>
</html></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><!-- 별점 반복문 -->
<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);
}
});</p>
<p>//폼 전송시 체크
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;
}
});</p>
<p>if(is_break == true) {
return false;
}
var wr_3_val = wr_3.join(',');
$('#wr_3').val(wr_3_val);</p>
<p>return true;
</script></p>
<p>별점을 클릭시 마다 함수를 실행하는 형태가 아니고,
폼 전송 전에 체크하는 방식으로 하면 어떨까 싶습니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
다음과 같이 해보시는건 어떨까요?
</p>
<p><!DOCTYPE html>
<html lang="ko"></p>
<p><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="<a href="https://code.jquery.com/jquery-3.7.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.0.min.js"></script></a>
<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"</a> rel="stylesheet">
<script src="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></a>
</head></p>
<p><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="">
<p>4. 4번문항 wr_4 에 저장</p>
</div></p>
<p> <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);
}</p>
<p> 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></p>
<p></html></p>
<p>이렇게 하면 하나의 스크립트 함수로 5개의 항목을 처리할 수 있을것 같습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><!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="<a href="https://code.jquery.com/jquery-3.7.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.0.min.js"></script></a>
<link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"</a> rel="stylesheet">
<script src="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></a>
</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="">
<p>4. 4번문항 wr_4 에 저장</p>
</div>
</body>
</html></p>
<p>답변에 대한 댓글 1개
문제가 위 스크립트가 항목별로 실행되다 보니 스트립트가 5번이나 소스에 보입니다.
스크립트 한번 만 사용해서 5개 항목을 모두 처리할 수 있는 방법이 없을까요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인