체크박스로 출력된 값마다 다른 태그로 묶는 방법이 있나요? 채택완료
굼떠
4년 전
조회 1,975
안녕하세요. 여기저기 있는 자료를 조합하여 폼메일을 만들고 있습니다.
제가 구현하고자 하는 방식은 체크박스가 다중 선택이 되고, 그로 인해 체크된 박스는 상단 특정 div에 따로 출력 됩니다. 헌데 선택 된 텍스트들이 태그 없이 문자로만 출력이되서 일렬로 주르륵 나열되는 상황이 발생되는데 어떻게 해서 선택값을 다른 태그로 감쌀 수 있을까요?
</p>
<p>
$(".check").click(function(){ // 여기서 .click은 체크박스의 체크를 뜻한다.</p>
<p> var str = ""; // 여러개가 눌렸을 때 전부 출력이 될 수 있게 하나의 객체에 담는다.
$(".check").each(function(){ // .each()는 forEach를 뜻한다.</p>
<p> if($(this).is(":checked")) // ":checked"를 이용하여 체크가 되어있는지 아닌지 확인한다.
str += $(this).val() + " "; // 체크된 객체를 str에 저장한다.
});
$("#multiPrint").text(str); // #multiPrint에 체크된 원소를 출력한다.
});
</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
4년 전
$(".check").click(function(){ // 여기서 .click은 체크박스의 체크를 뜻한다.
var str;
$(".check").each(function(){ // .each()는 forEach를 뜻한다.
if($(this).is(":checked")) // ":checked"를 이용하여 체크가 되어있는지 아닌지 확인한다.
str += </code>'<원하는태그>' + $(this).val() + '</원하는태그>';</pre>
<pre>
<code> });
</code></pre>
<pre>
<code>$("#multiPrint").html(str);</code></pre>
<pre>
<code>
});</code></pre>
<pre>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
4년 전
</p>
<p><div id="multiPrint"></div>
<input type="checkbox" class="check" value="빨강입니다" id="check-1" data-color="red"> <label for="check-1">빨강입니다</label>
<input type="checkbox" class="check" value="파랑입니다" id="check-2" data-color="blue"> <label for="check-2">파랑입니다</label></p>
<p><script>
$(".check").click(function(){ // 여기서 .click은 체크박스의 체크를 뜻한다.
var str = ""; // 여러개가 눌렸을 때 전부 출력이 될 수 있게 하나의 객체에 담는다.
$(".check").each(function(){ // .each()는 forEach를 뜻한다.
if($(this).is(":checked")) // ":checked"를 이용하여 체크가 되어있는지 아닌지 확인한다.
str += '<font color="' + $(this).data('color') + '">' + $(this).val() + '</font> '; // 체크된 객체를 str에 저장한다.
});
$("#multiPrint").html(str); // #multiPrint에 체크된 원소를 출력한다.
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인