체크박스로 출력된 값마다 다른 태그로 묶는 방법이 있나요?
본문
안녕하세요. 여기저기 있는 자료를 조합하여 폼메일을 만들고 있습니다.
제가 구현하고자 하는 방식은 체크박스가 다중 선택이 되고, 그로 인해 체크된 박스는 상단 특정 div에 따로 출력 됩니다. 헌데 선택 된 텍스트들이 태그 없이 문자로만 출력이되서 일렬로 주르륵 나열되는 상황이 발생되는데 어떻게 해서 선택값을 다른 태그로 감쌀 수 있을까요?
$(".check").click(function(){ // 여기서 .click은 체크박스의 체크를 뜻한다.
var str = ""; // 여러개가 눌렸을 때 전부 출력이 될 수 있게 하나의 객체에 담는다.
$(".check").each(function(){ // .each()는 forEach를 뜻한다.
if($(this).is(":checked")) // ":checked"를 이용하여 체크가 되어있는지 아닌지 확인한다.
str += $(this).val() + " "; // 체크된 객체를 str에 저장한다.
});
$("#multiPrint").text(str); // #multiPrint에 체크된 원소를 출력한다.
});
답변 2
$(".check").click(function(){ // 여기서 .click은 체크박스의 체크를 뜻한다.
var str;
$(".check").each(function(){ // .each()는 forEach를 뜻한다.
if($(this).is(":checked")) // ":checked"를 이용하여 체크가 되어있는지 아닌지 확인한다.
str += '<원하는태그>' + $(this).val() + '</원하는태그>';
});
$("#multiPrint").html(str);
});
<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>
<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>
답변을 작성하시기 전에 로그인 해주세요.