다중 체크박스 선택 항목 추가

다중 체크박스 선택 항목 추가

QA

다중 체크박스 선택 항목 추가

본문

 

3025377459_1640673913.6843.jpg원래 위와 같이 첫번째 체크박스만  있었는데
 

 

 

아래와 같은 체크박스 선택 섹션을 몇개 더 추가하고 싶어서

3025377459_1640673947.2518.jpg

 

같은 소스를 복사해서 붙이고..

 <input type="hidden" id="room_options" value="<?php echo $wr_9 ?>" class="frm_input" name="wr_9" placeholder="옵션">
<div id="room_option_check_fields">

여기에서id="room_options 이거와  d="room_option_check_fields" 이거를

room_options1
room_option_check_fields1
wr_9 -> wr10
이런식으로 아이디값을 디비 필드값을 바꾸고

스크립트 var 에
var ro = document.querySelectorAll('#room_option_check_fields1 input');
var hiddenROField = document.querySelector('#room_options1');
var roomOptions = '<?php echo $wr_10 ?>'.split('|');

이런식으로 했는데

잘 안되네요.. .

스크립트 수정을 해야 하는 것 같은데.. 도움 좀 부탁드립니다.

 

----------------------------------------------------------------------------------------------

            <p class="ks4 f16"><strong>특징</strong></strong></p>

                  <input type="hidden" id="room_options" value="<?php echo $wr_9 ?>" class="frm_input" name="wr_9" placeholder="옵션">

            <div id="room_option_check_fields">

            <?php

            $options = [ '물을 좋아함', '낯을 가림', '잘꾸러기', '엄마껌딱지', '트라우마있음', '친구를 좋아해요', '사람을 좋아요', '안기는걸 좋아해요', '애너자이져', '궁금쟁이', '애교덩어리', '뽀뽀쟁이', '겁쟁이', '산책왕', '귀요미', '용감무쌍', '최고착함', '독립적', '눈치왕', '예민보스', '사랑둥이', '순딩이', '사고뭉치', '인싸', '질투쟁이', '굿 매너', '먹보', '새침데기'];

  

            foreach ($options as $item) {

              echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';

            }

            ?>

            </div><p></p>

 

<!--체크박스 선택 영역 추가-->

            <p class="ks4 f16"><strong>특징</strong></strong></p>

                  <input type="hidden" id="room_options1" value="<?php echo $wr_10 ?>" class="frm_input" name="wr_10" placeholder="옵션">

            <div id="room_option_check_fields1">

            <?php

            $options = [ '물을 좋아함', '낯을 가림', '잘꾸러기', '엄마껌딱지', '트라우마있음', '친구를 좋아해요', '사람을 좋아요', '안기는걸 좋아해요', '애너자이져', '궁금쟁이', '애교덩어리', '뽀뽀쟁이', '겁쟁이', '산책왕', '귀요미', '용감무쌍', '최고착함', '독립적', '눈치왕', '예민보스', '사랑둥이', '순딩이', '사고뭉치', '인싸', '질투쟁이', '굿 매너', '먹보', '새침데기'];

  

            foreach ($options as $item) {

              echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';

            }

            ?>

            </div><p></p>

------------------------------------------------------------------------------------------------

 

            var ro = document.querySelectorAll('#room_option_check_fields input');

            var hiddenROField = document.querySelector('#room_options');

            var roomOptions = '<?php echo $wr_9 ?>'.split('|');

 

            console.log(roomOptions);

            for (let i = 0; i < ro.length; i++)

            {

              if(roomOptions.includes(ro[i].value))

              {

                ro[i].checked = true;

              }

            }

            function add_option(){

              hiddenROField.value = '';

              for (let i = 0; i < ro.length; i++)

                if (ro[i].checked)

                  hiddenROField.value += ro[i].value + '|';

 

              hiddenROField.value = hiddenROField.value.slice(0, -1);

            }

 

 

<!-- 스크립트 추가-->

 

            var ro = document.querySelectorAll('#room_option_check_fields1 input');

            var hiddenROField = document.querySelector('#room_options1');

            var roomOptions = '<?php echo $wr_10 ?>'.split('|');

 

            console.log(roomOptions);

            for (let i = 0; i < ro.length; i++)

            {

              if(roomOptions.includes(ro[i].value))

              {

                ro[i].checked = true;

              }

            }

            function add_option(){

              hiddenROField.value = '';

              for (let i = 0; i < ro.length; i++)

                if (ro[i].checked)

                  hiddenROField.value += ro[i].value + '|';

 

              hiddenROField.value = hiddenROField.value.slice(0, -1);

            }

이 질문에 댓글 쓰기 :

답변 2


<p class="ks4 f16"><strong>특징</strong></strong></p>
            <input type="hidden" id="room_options" value="<?php echo $write['wr_9'] ?>" class="frm_input" name="wr_9" placeholder="옵션">
<div id="room_option_check_fields">
<?php
$options = [ '물을 좋아함', '낯을 가림', '잘꾸러기', '엄마껌딱지', '트라우마있음', '친구를 좋아해요', '사람을 좋아요', '안기는걸 좋아해요', '애너자이져', '궁금쟁이', '애교덩어리', '뽀뽀쟁이', '겁쟁이', '산책왕', '귀요미', '용감무쌍', '최고착함', '독립적', '눈치왕', '예민보스', '사랑둥이', '순딩이', '사고뭉치', '인싸', '질투쟁이', '굿 매너', '먹보', '새침데기'];
 
foreach ($options as $item) {
echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';
}
?>
</div><p><br></p>

<p class="ks4 f16"><strong>교육</strong></h6></span></p>
            <input type="hidden" id="room_options" value="<?php echo $write['wr_9'] ?>" class="frm_input" name="wr_10" placeholder="옵션">
<div id="room_option_check_fields">
<?php
$options = [ '목 줄', '하네스', '패드배변', '실외배변', '앉아', '기다려', '손', '엎드려', '콜백', '켄 넬'];
 
foreach ($options as $item) {
echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';
}
?>
</div><p><br></p>
<p class="ks4 f16"><strong>좋아해요</strong></h6></span></p>
            <input type="hidden" id="room_options" value="<?php echo $write['wr_9'] ?>" class="frm_input" name="wr_11" placeholder="옵션">
<div id="room_option_check_fields">
<?php
$options = [ '사람', '자동차 타기', '터치', '나무 막대', '간식', '산책', '음식', '장난감', '개 친구들', '풀', '공', '멍멍이 침대', '늘어져있기', '엄빠', '물', '터그놀이', '노즈워크', '물건 물어뜯기', '얼음', '머리카락', '안기기', '뛰기', '신발', '끈', '던지기 놀이', '빨래', '동거견', '양말', '목줄', '뛰어놀기', '소파', '일광욕', '새', '빛질', '운동장', '푹신한 담요', '천 장난감', '인형', '수 영', '쿠션'];
 
foreach ($options as $item) {
echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';
}
?>
</div><p><br></p>
<p class="ks4 f16"><strong>싫어해요</strong></h6></span></p>
            <input type="hidden" id="room_options" value="<?php echo $write['wr_9'] ?>" class="frm_input" name="wr_12" placeholder="옵션">
<div id="room_option_check_fields">
<?php
$options = [ '목욕', '발 닦기', '옷', '갇히는 것', '수영', '발톱 자르기', '혼자 있는것', '큰 소리', '남자', '청소기', '갑작스런 움직임', '갑작스런 소리', '어두운 곳', '낯선 소리', '드라이기', '양치', '안김 당하기', '갑작스런 터치', '계단', '앞다리 잡기', '어린 아이', '낯선 환경', '큰 개','오토바이', '자동차 소리', '낯선 사람', '고양이', '다가오는 개', '동물병원', '자전거', '킥보드', '꼬리 만지기', '짖는 개', '빗질', '낯선 남자', '긴 막대기', '천둥소리', '손수레', '엉덩이 닦기', '우산', '적극적인 강아지', '철문 소리', '켄넬', '약 먹기', '높은 곳'];
 
foreach ($options as $item) {
echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';
}
?>
</div><p><br></p>
<p class="ks4 f16"><strong>소유욕</strong></p>
            <input type="hidden" id="room_options" value="<?php echo $write['wr_9'] ?>" class="frm_input" name="wr_13" placeholder="옵션">
<div id="room_option_check_fields">
<?php
$options = [ '음 식', '장 난 감', '사 람', '공간', '간 식'];
 
foreach ($options as $item) {
echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';
}
?>
</div><p><br></p>
<script>
var ro = document.querySelectorAll('#room_option_check_fields input');
var hiddenROField = document.querySelector('#room_options');
var roomOptions = '<?php echo $wr_9 ?>'.split('|');
console.log(roomOptions);
for (let i = 0; i < ro.length; i++)
{
  if(roomOptions.includes(ro[i].value))
  {
    ro[i].checked = true;
  }
}
function add_option(){
  hiddenROField.value = '';
  for (let i = 0; i < ro.length; i++)
    if (ro[i].checked)
      hiddenROField.value += ro[i].value + '|';
  hiddenROField.value = hiddenROField.value.slice(0, -1);
}
</script>

아래 주석으로 달아 놓은 1,2,3 을 확인해보세요.

 
var ro = document.querySelectorAll('#room_option_check_fields9 input');
 var hiddenROField = document.querySelector('#room_options9');
 var roomOptions9 = '<?php echo $wr_9 ?>'.split('|');
 console.log(roomOptions9);
 for (let i = 0; i < ro.length; i++)
 {
     if(roomOptions9.includes(ro[i].value))
     {
         ro[i].checked = true;
     }
 }
 function add_option(){
     hiddenROField.value = '';
     for (let i = 0; i < ro.length; i++)
         if (ro[i].checked)
             hiddenROField.value += ro[i].value + '|';
     hiddenROField.value = hiddenROField.value.slice(0, -1);
 }
 var ro = document.querySelectorAll('#room_option_check_fields10 input');
 var hiddenROField = document.querySelector('#room_options10');  
//  1.===이부분에 hiddenRoField 변수가 전역변수로 쓰이는 것 같은데 위 쪽의 hiddenRoField 변수와 겹칩니다. 변수명을 수정하고 아래쪽 코드에서 해당하는 변수명을 모두 수정하세요.
 var roomOptions10 = '<?php echo $wr_10 ?>'.split('|');         
 console.log(roomOptions10);                                         
 for (let i = 0; i < ro.length; i++)
 {
     if(roomOptions10.includes(ro[i].value))
     {
         ro[i].checked = true;
     }
 }
 function add_option(){            // 2.=== 동일 이름의 함수가 위에 있습니다. 다른 이름을 주고 php에서 태그를 만들때 onclick 이벤트에 변경된 함수로 연결하세요.
     hiddenROField.value = '';    //  3.===위쪽에서 변경한 변수명으로 수정하세요. 아래 코드에서도 모두 바꿔주세요. 
     for (let i = 0; i < ro.length; i++)
         if (ro[i].checked)
             hiddenROField.value += ro[i].value + '|';
     hiddenROField.value = hiddenROField.value.slice(0, -1);
 }

var ro = document.querySelectorAll('#room_option_check_fields9 input');
var hiddenROField = document.querySelector('#room_options9');
var roomOptions9 = '<?php echo $wr_9 ?>'.split('|');
console.log(roomOptions9);
for (let i = 0; i < ro.length; i++)
{
if(roomOptions9.includes(ro[i].value))
{
ro[i].checked = true;
}
}
    function add_option(){
hiddenROField.value = '';
for (let i = 0; i < ro.length; i++)
if (ro[i].checked)
hiddenROField.value += ro[i].value + '|';
hiddenROField.value = hiddenROField.value.slice(0, -1);
}


var ro10 = document.querySelectorAll('#room_option_check_fields10 input');
var hiddenROField10 = document.querySelector('#room_options10');  //  1.===이부분에 hiddenRoField 변수가 전역변수로 쓰이는 것 같은데 위 쪽의 hiddenRoField 변수와 겹칩니다. 변수명을 수정하고 아래쪽 코드에서 해당하는 변수명을 모두 수정하세요.
var roomOptions10 = '<?php echo $wr_10 ?>'.split('|');       
console.log(roomOptions10);                                       
for (let i = 0; i < ro10.length; i++)
{
if(roomOptions10.includes(ro10[i].value))
{
ro10[i].checked = true;
}
}
function add_option10(){            // 2.=== 동일 이름의 함수가 위에 있습니다. 다른 이름을 주고 php에서 태그를 만들때 onclick 이벤트에 변경된 함수로 연결하세요.
hiddenROField10.value = '';    //  3.===위쪽에서 변경한 변수명으로 수정하세요. 아래 코드에서도 모두 바꿔주세요.
for (let i = 0; i < ro10.length; i++)
if (ro10[i].checked)
hiddenROField10.value += ro10[i].value + '|';
hiddenROField10.value = hiddenROField10.value.slice(0, -1);
}


var ro11 = document.querySelectorAll('#room_option_check_fields11 input');
var hiddenROField11 = document.querySelector('#room_options11');  //  1.===이부분에 hiddenRoField 변수가 전역변수로 쓰이는 것 같은데 위 쪽의 hiddenRoField 변수와 겹칩니다. 변수명을 수정하고 아래쪽 코드에서 해당하는 변수명을 모두 수정하세요.
var roomOptions11 = '<?php echo $wr_11 ?>'.split('|');       
console.log(roomOptions11);                                       
for (let i = 0; i < ro11.length; i++)
{
if(roomOptions11.includes(ro11[i].value))
{
ro11[i].checked = true;
}
}
function add_option11(){            // 2.=== 동일 이름의 함수가 위에 있습니다. 다른 이름을 주고 php에서 태그를 만들때 onclick 이벤트에 변경된 함수로 연결하세요.
hiddenROField11.value = '';    //  3.===위쪽에서 변경한 변수명으로 수정하세요. 아래 코드에서도 모두 바꿔주세요.
for (let i = 0; i < ro11.length; i++)
if (ro11[i].checked)
hiddenROField11.value += ro11[i].value + '|';
hiddenROField11.value = hiddenROField11.value.slice(0, -1);
}



var ro12 = document.querySelectorAll('#room_option_check_fields12 input');
var hiddenROField12 = document.querySelector('#room_options12');  //  1.===이부분에 hiddenRoField 변수가 전역변수로 쓰이는 것 같은데 위 쪽의 hiddenRoField 변수와 겹칩니다. 변수명을 수정하고 아래쪽 코드에서 해당하는 변수명을 모두 수정하세요.
var roomOptions12 = '<?php echo $wr_12 ?>'.split('|');       
console.log(roomOptions12);                                       
for (let i = 0; i < ro12.length; i++)
{
if(roomOptions12.includes(ro12[i].value))
{
ro12[i].checked = true;
}
}
function add_option12(){            // 2.=== 동일 이름의 함수가 위에 있습니다. 다른 이름을 주고 php에서 태그를 만들때 onclick 이벤트에 변경된 함수로 연결하세요.
hiddenROField12.value = '';    //  3.===위쪽에서 변경한 변수명으로 수정하세요. 아래 코드에서도 모두 바꿔주세요.
for (let i = 0; i < ro12.length; i++)
if (ro12[i].checked)
hiddenROField12.value += ro12[i].value + '|';
hiddenROField12.value = hiddenROField12.value.slice(0, -1);
}


var ro13 = document.querySelectorAll('#room_option_check_fields13 input');
var hiddenROField13 = document.querySelector('#room_options13');  //  1.===이부분에 hiddenRoField 변수가 전역변수로 쓰이는 것 같은데 위 쪽의 hiddenRoField 변수와 겹칩니다. 변수명을 수정하고 아래쪽 코드에서 해당하는 변수명을 모두 수정하세요.
var roomOptions13 = '<?php echo $wr_13 ?>'.split('|');       
console.log(roomOptions13);                                       
for (let i = 0; i < ro13.length; i++)
{
if(roomOptions13.includes(ro13[i].value))
{
ro13[i].checked = true;
}
}
function add_option13(){            // 2.=== 동일 이름의 함수가 위에 있습니다. 다른 이름을 주고 php에서 태그를 만들때 onclick 이벤트에 변경된 함수로 연결하세요.
hiddenROField13.value = '';    //  3.===위쪽에서 변경한 변수명으로 수정하세요. 아래 코드에서도 모두 바꿔주세요.
for (let i = 0; i < ro13.length; i++)
if (ro13[i].checked)
hiddenROField13.value += ro13[i].value + '|';
hiddenROField13.value = hiddenROField13.value.slice(0, -1);
}

<ul class="en2">
<p class="ks4 f16"><strong>특징</strong></strong></p>
            <input type="hidden" id="room_options9" value="<?php echo $wr_9 ?>" class="frm_input" name="wr_9" placeholder="옵션">
<div id="room_option_check_fields9">
<?php
$options = [ '물을 좋아함', '낯을 가림', '잘꾸러기', '엄마껌딱지', '트라우마있음', '친구를 좋아해요', '사람을 좋아요', '안기는걸 좋아해요', '애너자이져', '궁금쟁이', '애교덩어리', '뽀뽀쟁이', '겁쟁이', '산책왕', '귀요미', '용감무쌍', '최고착함', '독립적', '눈치왕', '예민보스', '사랑둥이', '순딩이', '사고뭉치', '인싸', '질투쟁이', '굿 매너', '먹보', '새침데기'];
 
foreach ($options as $item) {
echo '<label class="option_check"><input type="checkbox" value="' . $item . '" onclick="add_option()"> ' . $item . '</label>';
}
?>
</div><p><br></p>


<p class="ks4 f16"><strong>교육</strong></h6></span></p>
            <input type="hidden" id="room_options10" value="<?php echo $wr_10 ?>" class="frm_input" name="wr_10" placeholder="옵션">
<div id="room_option_check_fields10">
<?php
$options10 = [ '목줄', '하네스', '패드배변', '실외배변', '앉아', '기다려', '손', '엎드려', '콜백', '켄넬'];
 
foreach ($options10 as $item10) {
echo '<label class="option_check"><input type="checkbox" value="' . $item10 . '" onclick="add_option10()"> ' . $item10 . '</label>';
}
?>
</div><p><br></p>

<p class="ks4 f16"><strong>좋아해요</strong></h6></span></p>
            <input type="hidden" id="room_options11" value="<?php echo $wr_11 ?>" class="frm_input" name="wr_11" placeholder="옵션">
<div id="room_option_check_fields11">
<?php
$options11 = [ '사람', '자동차 타기', '터치', '나무 막대', '간식', '산책', '음식', '장난감', '개 친구들', '풀', '공', '멍멍이 침대', '늘어져있기', '엄빠', '물', '터그놀이', '노즈워크', '물건 물어뜯기', '얼음', '머리카락', '안기기', '뛰기', '신발', '끈', '던지기 놀이', '빨래', '동거견', '양말', '목줄', '뛰어놀기', '소파', '일광욕', '새', '빛질', '운동장', '푹신한 담요', '천 장난감', '인형', '수영', '쿠션'];
 
foreach ($options11 as $item11) {
echo '<label class="option_check"><input type="checkbox" value="' . $item11 . '" onclick="add_option11()"> ' . $item11 . '</label>';
}
?>
</div><p><br></p>

<p class="ks4 f16"><strong>싫어해요</strong></h6></span></p>
            <input type="hidden" id="room_options12" value="<?php echo $wr_12 ?>" class="frm_input" name="wr_12" placeholder="옵션">
<div id="room_option_check_fields12">
<?php
$options12 = [ '목욕', '발 닦기', '옷', '갇히는 것', '수영', '발톱 자르기', '혼자 있는것', '큰 소리', '남자', '청소기', '갑작스런 움직임', '갑작스런 소리', '어두운 곳', '낯선 소리', '드라이기', '양치', '안김 당하기', '갑작스런 터치', '계단', '앞다리 잡기', '어린 아이', '낯선 환경', '큰 개','오토바이', '자동차 소리', '낯선 사람', '고양이', '다가오는 개', '동물병원', '자전거', '킥보드', '꼬리 만지기', '짖는 개', '빗질', '낯선 남자', '긴 막대기', '천둥소리', '손수레', '엉덩이 닦기', '우산', '적극적인 강아지', '철문 소리', '켄넬', '약 먹기', '높은 곳'];
 
foreach ($options12 as $item12) {
echo '<label class="option_check"><input type="checkbox" value="' . $item12 . '" onclick="add_option12()"> ' . $item12 . '</label>';
}
?>
</div><p><br></p>

<p class="ks4 f16"><strong>소유욕</strong></p>
            <input type="hidden" id="room_options13" value="<?php echo $wr_13 ?>" class="frm_input" name="wr_13" placeholder="옵션">
<div id="room_option_check_fields13">
<?php
$options13 = [ '음식', '장난감', '사람', '공간', '간식'];
 
foreach ($options13 as $item13) {
echo '<label class="option_check"><input type="checkbox" value="' . $item13 . '" onclick="add_option13()"> ' . $item13 . '</label>';
}
?>
</div><p><br></p>
</ul>

답변을 작성하시기 전에 로그인 해주세요.
전체 44
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT