채택완료

체크박스 선택 시, 체크된 항목 출력

Copy
<tr>

<td class="program_list swdeveloper" style="display:none;">

                <label class="program able"><span></span><input type="checkbox" name="wr_8[]" value="선택1"> 선택1 </label>
                <label class="program able"><span></span><input type="checkbox" name="wr_8[]" value="선택2"> 선택2 </label>
                <label class="program able"><span></span><input type="checkbox" name="wr_8[]" value="선택3"> 선택3 </label>
                <label class="program able"><span></span><input type="checkbox" name="wr_8[]" value="선택4"> 선택4 </label>

                <script>
                    var str_wr_8 = "<?=@$write['wr_8']?>";
                    $("input:checkbox[name='wr_8[]']").each(function(index){
                        if(str_wr_8.indexOf($(this).val()) > -1){
                            $(this).attr("checked", true);
                        }
                    });
                </script>
            </td>

</tr>

 

<tr>
                <th scope="row">선택한 프로그램</th>
                <td>
                    <p class="val1"></p>
                </td>
                
                <script>
                    $("label.program input").change(function(){
                            $(".val1").text( $(this).val());
                        });
                </script>
        </tr>

이런식으로 "label.program input가 체크되었을 때 체크된 값들을 

val1에 출력하려고 합니다. 

근데 체크박스이다보니, 여러게를 선택하게끔 하게 되어있는데, 한개씩만 출력이 되더라구요....

누적이 되게끔 하고 싶은데, 방법이 있을까요?

체크되어있는 값만 출력하면 되는데, 만약 체크가 취소되면 없어지게끔도 가능할까요?

답변 2개 / 댓글 5개

채택된 답변
+20 포인트
2021-07-22 (목) 16:06:33
Copy
<script>
  $("label.program input").on('change', function(){                        
    var arr = [];  
    $("label.program input:checked").each(function() {  
        arr.push($(this).val());
    });  
    $(".val1").text(arr.join(','));                                        
  });
</script>

답변에 대한 댓글 4개

에고 감사합니다 ^^ 혹시 , 대신 한줄내리는건 어려울까요 ㅠ?
2021-07-22 (목) 16:10:27
$(".val1").html(arr.join('<br>'));
너무 감사드립니다.. ㅎㅎ
혹시 응용적으로 선택값들을 선택할때, val1이 늘어나는 형식으로는 코드가 굉장히 까다로울까요?
2021-07-22 (목) 16:19:06
잘 모르겠습니다만, 그럴 것 같습니다.
2021-07-22 (목) 15:43:59
Copy
<script type='text/javascript'>  
<!--  
function function_click() {  
    var str = "";  
    $("input:checkbox:checked").each(function (index) {  
        str += $(this).val() + ",";  
    });  
    return str;  
//  alert(str);  
}  
//-->  
</script>

답변에 대한 댓글 1개

알러트풀어서 확인하려고 하는데 아무런 동작이 없네요 ㅠㅠ

답변을 작성하려면 로그인이 필요합니다.